记得前篇文章中写到在做风格的时候经常出现的一种情况就是浮动层错位,基本就是因为你把这个浮动层更好了其他位置或者这个大区域的布局改变引起的,今天就说说position的absolute和relative在布局中的应用。

  relative设置区块基准点为左上角,absolute设置网页的为基准点左上角,static无设置,其他配合使用的属性还有top right bottom left z-index,其中相对比较重要就是z-index,也就是显示层高低的问题,数字越大显示越靠前。

  上面简单介绍了下,但只看这些肯定很多人还是不知道如何使用或者灵活的掌握定位的使用,下载我具体说说几个常见的使用问题:

  当设定position:absolute:

  如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位。

  如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

  当设定position: relative:

  则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY 的左上角为原始点。相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间。因此,移动元素会导致它覆盖其他框。

  最后再说下有关悬浮问题定位使用:

  仿制discuz风格的过程中,经常会出现悬浮的错位,比如个人中心,个人信息弹出层等等,为什么会出现这样的情况,就是因为容器发生了变化。也就是说,position的属性值的效果,直接受其容器样式中position属性值影响,和我上面提到的2种情况很接近。

  例如如下A和B的嵌套结构

   当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。知道这些知识对你做模板做网站的布局得心应手很多了吧,想熟练关键还是要多实践多练习多尝试。