html - 为什么 height 和 top 属性在 position 是相对的时候不起作用？

Question

这会将框定位在顶部下方一点

<div style="height: 10em; width: 50%; left: 25%; top:2em; position: relative; background: white;">Hello World</div>

这会将框定位在顶部附近，看起来 height 和 top 属性都不是
在职的。盒子的高度不是50%，盒子不是低于顶部的50%。

<div style="height: 50%; width: 50%; left: 25%; top:20%; position: relative; background: white;">Hello World</div>

我在这方面几乎是个初学者，但如果 left 和 width 与百分比一起工作似乎不应该是 top 和 height？

Answer 1

如果它的父级没有固定高度，你的盒子不能有一个高度，即它的父级的百分比，因为那样盒子就不知道它需要多高(通常这样的父元素是 body 或其他一些包装元素)。

作为直接结果，带有百分比的 top 也不会产生任何影响。