1.position:absolute/relative的区别与应用
应用:子绝父相
absolute( 绝对的)绝对定位,是在层级关系上,离自己最近的父级,设有positon:relative(相对的)的左上角进行定位。如果祖代元素中,没有relative相对定位的元素,就默认相对于body定位。
补充解释:
relative相对定位,是相对于元素自己本身原来的位置,进行定位,用left/right/top/bottom定位。本元素并没有脱离文档流,还占有原来的空间。
2.position:absolute/relative是否在文档流中
absolute绝对定位,是脱离文档流的, 与浮动float:left/right浮动定位一样的效果。注意:浮动定位是压在绝对定位的元素之上的。可以设置z-index,值小的更靠近用户的实现,值大的压在下面,默认值为auto。
relative相对定位,没有脱离文档流。使之脱离文档流的方法:设置z-index。使本元素相对于文档流中的元素层叠,或者脱离文档流。
3.应用代码示例
<div id="frame">
<div id="pohots" class="play">
<img src="http://www.jq22.com/img/cs/500x300-1.png" alt="">
<img src="http://www.jq22.com/img/cs/500x300-2.png" alt="">
<img src="http://www.jq22.com/img/cs/500x300-3.png" alt="">
<img src="http://www.jq22.com/img/cs/500x300-4.png" alt="">
<ul id="dis">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
在外面套个盒子
.box {
position: relative;
left: 50%;
margin-left: -150px;
}