前段時間有一次去面試，面試官問到我一個如何用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;
}
加上了定位，問題解決了。