因工程需要，要做一個圖片展示（跑馬燈）的效果！
雖然有知道css的絕對定位（absolute）、相對定位（relative），但卻從未自己動手寫過相關的效果！
忙活了一大半天，也算是完成了！也把這兩個屬性搞明白了一些！
總結如下：
先看下面這一個層結構
<body>
<div id=posi>
<div id=rel> 此層只應用position：relative;樣式 </div>
<div id=abs> 此層只應用position：absolute;樣式 </div>
<div id=sss> 不應用樣式 <div>
</div>
</body>
1、absolute：不占位、relative：有占位！
如上層結構:
id為rel的層在顯示時，會占用一行！其后面的abs層只會在下一行顯示出來！
id為abs的層在顯示時，會與后面id為sss的重疊在一起！
2、默認情況下（不結合top等來定位），absolute（絕對定位）以父層來定位的
如上面的id為abs的層，如果不結合top等來定位，則其顯示位置會隨父級posi層（posi在文檔左下角，其也會在左下角）
3、在結合top、bottom、right、left等屬性時，absolute（絕對定位）以窗口做為定位，relative以自身的占位為基線做偏移！如下：
<body>
<div id=posi>
<div id=sss> 不應用樣式 <div>
<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div>
</div>
</body>
以上代碼：
id為rel的層會上移並與id為sss的層重疊
id為abs的層會以窗口為基線，移至距離窗口30像素的位置！
4、在結合top、bottom、right、left等屬性時，如果想absolute（絕對定位）能以父層做為定位基線的話，則在父層應用absolute或relativ屬性就可以!如下：
<body>
<div id=posi style=”position：relative”>
<div id=rel> 此層應用position：relative;bottom：30px;樣式 </div>
<div id=abs> 此層只應用position：absolute;bottom：30px;樣式 </div>
</div>
</body>
以上代碼：id為posi的層，也可以用absolute屬性！
id為rel的層，不受影響，以自身的占位為基線做偏移！
id為abs的層是以id為posi層的底邊做為定位基線，如果此時posi層的高度小於30px的話，abs層可能沒辦法看到哦！