css基础之绝对定位与相对定位绝对定位是以父元素的左上角原点为定位基准点，absolute 会将对象拖离出正常的文档流绝

最近发现在布局的时候常常会被多层的定位造成的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>

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

总结

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

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