position:relative 层级问题

Question

    <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;
    }

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

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

Answer 1

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