Css position属性的absolute及relative的总结
因工程需要,要做一个图片展示(跑马灯)的效果!
虽然有知道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层可能没办法看到哦!