position:relative 层级问题

    <div id="parent">
        <div id="child1"></div>
        <div id="child2"></div>
    </div>

    #parent{
        width: 100px;
        height: 100px;
        padding: 10px;
        margin: 5px;
        border: 3px solid pink;
    }
    #child1{
        width: 50px;
        height: 30px;
        background-color: burlywood;
    }
    #child2{
        width: 40px;
        height: 40px;
        background-color: blue;
    }

img

现在给 child1 设置相对定位，如下图。

img


问题：position:relative 不是可以提升层级吗，为什么这里第一个元素设置相对定位后，没有覆盖第二个元素呢？
设置absolute 和 fixed是可以的。

absolute或者fixed定位会让元素脱离文档流，元素不会占据文档流中原本的空间，才能让之后的内容来占据这个元素让出的空间，产生覆盖重叠。
而relative 不会让元素脱离文档流，元素还是会占据文档流中原本的空间。就不会与之后的内容覆盖重叠。

用下面代码修改做测试，对B div取消relative定位可以看出A位置没有变化，说明A是相对B原始位置定位而不是B重新定位后的位置定位。
B改为absolute定位后，A相对于C定位，不在参考B

有帮助麻烦点个采纳【本回答右上角】，谢谢~~

img

<!doctype html>
<div style=" width: 100px; height: 100px; padding: 10px; margin: 5px; border: 3px solid pink;">
    <div style="width:100px;height:50px;background:#ccc">C</div>
    <div style=" width: 50px; height: 30px; background-color: burlywood; position: relative; top: 30px">B</div>
    <div style="width: 40px; height: 40px; background-color: blue; position: relative; z-index: 1; top: 20px">A</div>
</div>

用z-index;

relative是相对于之前的兄弟节点定位，假设这个节点为A（top：20px）。如果A前一个节点是absolute或者fixed定位脱离了文档流则往前找第一个非absolute或者fixed定位的兄弟节点，如果不存在此类节点则相对父元素定位。找到之前的兄弟节点后，假设为B，如果B是relative，则A是相对B原来的位置定位，而不是B按照自身样式定位后的位置定位，有点拗口，意思就是B relative 定位并且top:20px，A是相对原来B原来top:0时的位置定位，这样A和B会连一起，而不是隔开有20px空白了。

如果absolute或者fixed定位，则会相对第一个出现的absolute，relative，fixed定位的父元素来定位，如果不存在则相对于body定位