javascript - 在相对定位中使用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>
<p class="x">
    <p class="y1">
    </p>
    <p class="y2">
    </p>
</p>

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