用css3动画制作幻灯片效果实现不了的问题

       前段时间有一次去面试，面试官问到我一个如何用css3实现一个幻灯片效果的问题，当时想了半天没想出来，结果就跪了。

       我发现类似于这些小例子经常容易问到，比如让实现一个倒计时器，三列布局，还有一些事件比如拖拽事件，touch事件，冒泡事件；还有闭包，匿名函数这些。。。

       扯的有点远了，回到正题把。我在w3cSchool学习了css3 animation，然后想用下面的代码实现一个幻灯片效果却怎么也显示不出来。

html:

    <div class="center">
        <ul class="photoController">
            <li><img class="photoStyle" src="image1.jpg"></li>
            <li><img class="photoStyle" src="image2.jpg"></li>
            <li><img class="photoStyle" src="image3.jpg"></li>
            <li><img class="photoStyle" src="image4.png"></li>
        </ul>
    </div>

css:

.center {
                position: relative;
                width: 600px;
                height: 400px;
                overflow: hidden;
            }


            .photoController {
                margin: 0;
                padding: 0;
                list-style: none;
                -webkit-animation: ani 20s infinite;
            }


            @-webkit-keyframes ani {
                from to {
                    top: 0;
                }
                12.5% {
                    top: 0;
                }
                25% {
                    top: -400px;
                }
                50% {
                    top: -800px;
                }
                75% {
                    top: -1200px;
                }
            }


            .photoStyle {
                width: 600px;
                height: 400px;
            }

      查了好多次代码，就是实现不了。感觉也没什么问题，想了一下原理，其实就是设置四张图片的定位，height：400px，最开始距第一张图片上面0px,然后每隔一定的时间第一张图片距上面-400px，第二张图片最开始距上面400px,此时就变成了0px，依次这样。

     无意中看到了div的定位是relative，我好奇为什么不用absolute呢，然后实验了一下，如果用absolute，那么我在html下面再加上一些代码如下

    <div class="center">
        <ul class="photoController">
            <li><img class="photoStyle" src="image1.jpg"></li>
            <li><img class="photoStyle" src="image2.jpg"></li>
            <li><img class="photoStyle" src="image3.jpg"></li>
            <li><img class="photoStyle" src="image4.png"></li>
        </ul>
    </div>

  <div>

     <h1>这个数据会显示在什么地方？</h1>

  </div>

      下面加的一行字会被图片挡住，也就是说<h1></h1>这个标签会忽视absolute，为什么呢？因为如果不设置定位，默认是static定位。

   static：没有定位，元素出现在正常的流中，忽略（top,bottom, left,right或者z-index说明）

   感觉问题找到了，我没有设置ul的定位，那么它默认就是static定位，那么是不是就会忽视top的设置，试验了一下，给 .photoController {

               positon:absolute;
                margin: 0;
                padding: 0;
                list-style: none;
                -webkit-animation: ani 20s infinite;
            }

加上了定位，问题解决了。