在相对定位中使用top等属性，为什么会出现div重叠的情况？

Question

<style>

.x{width: 500px;height:1000px;background: yellow;position: relative;}

.y1{width: 100px;height: 100px;top:100px;position: relative;background: red;}

.y2{width: 100px;height: 100px;top:0px;position: relative;background: green;}

</style>

<div class="x">

    <div class="y1">

    </div>

    <div class="y2">

    </div>

</div>

上述代码的结果如下图所示，我在相对定位中使用top，当top=0px时，为什么.y2完全盖住了.y1，我用的可是相对定位啊？
谢谢

Answer 1

因为relative相对于本身原位置定位，在这里两个的位置相同，所以后面一个会堆在前面一个的上面，形成覆盖：y1左上角（0,0）-> top:100px -->最终（100,0）y2左上角（100,0）->top:0 -->最终（100,0）注：其中y2的左上角位置是由于div的块级元素要换行的原因。