因工程需要，要做一个图片展示（跑马灯）的效果！
虽然有知道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层可能没办法看到哦！
352
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
