最近发现在布局的时候常常会被多层的定位造成的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来设定上下关系的，一定是子级在上父级在下。