css基础之绝对定位与相对定位

·  阅读 4790

最近发现在布局的时候常常会被多层的定位造成的position情况造成偏差,尤其是position:relative的情况下,原始位置依然被占据的情况,很容易忽略;所以在此记录一下(虽然这个知识很基础)!

绝对定位、相对定位

position: absolute

  • 绝对定位是以父元素的左上角原点为定位基准点,absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局。
  • 假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠。
  • 如果父级(无限)没有设定position属性,那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位;
  • 如果父级(无限)设定position属性,那么当前的absolute则结合TRBL属性以父级(最近)的左上角为原始点进行定位。

Tips:

  • 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 absolute 。否则上述属性会使用他们的默认值 auto ,这将导致对象遵从正常的HTML布局规则,在前一个对象之后立即被呈递。
  • TRBL属性(TOP、RIGHT、BOTTOM、LEFT)只有当设定了position属性才有效,position:relative也可以生效。

position:relative

  • 相对定位是相对其初始位置进行偏移定位的,当设定position: relative 则参照父级(最近)的内容区的左上角为原始点结合TRBL属性进行定位(或者说相对于被定位元素在父级内容区中的上一个元素进行偏移),无父级则以BODY的左上角为原始点。
  • 相对定位是不能层叠的。在使用相对定位时,无论元素是否进行移动,元素依然占据原来的空间(如果不好理解,下面案例说明了这一点)。因此,移动元素会导致它覆盖其他框。
<!DOCTYPE html>
<html>
<head>
    <title>绝对定位与相对定位</title>
</head>
<body>
    <div style="border-style: solid;border-color: red;height: 500px;width: 100%;">
        <div style="height:100%;background-color:yellow;position: absolute;top:50px;left:50px;">绝对</div>
        <div style="height:50%;background-color: green;">相对</div>
        <div style="height:60%;background-color: blue"></div>
    </div>
</body>
</html>
复制代码

-w710
-w710

此时我们在“相对的那个div”增加position: relative;top:300px;,效果如下: -w711

总结

图层覆盖顺序由上到下为:相对>绝对>默认,初始状态(没有加top偏移时候的初始状态)的相对div在左上角覆盖绝对div的上半部分,经过top偏移后移动到下方,但是默认的那个div仍然没有自动顶上去,because相对定位的初始位置依然是被占据的。

父子关系是无法用z-index来设定上下关系的,一定是子级在上父级在下。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改