前段時間有一次去面試，面試官問到我一個如何用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;
            }

加上了定位，問題解決了。