码迷,mamicode.com
首页 > 其他好文 > 详细

绝对定位和相对定位

时间:2014-10-17 11:41:37      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:ar   使用   sp   ef   line   as   tt   ash   空间   

绝对定位——元素会脱离文档流,它的偏移位置是以最近已定位的祖先元素作为参照,如果没有已定位的祖先元素,则以顶级元素作为参照。可以通过index来控制层级。

相对定位——元素不会脱离文档流,仍然占据原来的空间,它的偏移位置会以自身的占位空间作为参照。可以通过设置margin-top、margin-bottom为负值,来改变它在占位空间中的高度。

小结

1.一般父级元素使用相对定位,子级元素使用绝对定位。

2.对于相对定位元素,left、right、top、bottom属性与margin属性混合使用会产生累加效果。

3.对于绝对定位元素,left、right、top、bottom属性与margin属性混合使用,偏移方向相同累加,方向相反margin值无效。

4.对于绝对定位元素,使用margin值进行布局时,不管它有没有已经定位的祖先元素,都会以它原来所在文档流中的位置作为参照。此时margin-top、margin-bottom不再对文档流中的元素产生影响,因为该元素已经脱离了文档流。

5.对于绝对定位元素和浮动元素,设置display:inline/block均无效,因为此时元素默认以display:inline-block显示。

绝对定位和相对定位

标签:ar   使用   sp   ef   line   as   tt   ash   空间   

原文地址:http://www.cnblogs.com/wqhwe/p/4029686.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!