css - 相对父级，按百分比垂直绝对定位？

Question

我正在尝试按百分比创建垂直定位的 DIV。我将父容器设置为相对，将内容 div 设置为绝对。当我用像素定位内容 div 时，这工作正常，但当我尝试百分比时，百分比将被忽略:

.container {
position: relative;
}


.content {
position: absolute;
left: 10%;
top: 50%;
}


<div class="container"><div class="content"> This is the content div. It should be 10% from the left of the container div.
</div></div>

内容 div 出现在页面顶部，忽略 50% 的垂直位置。我错过了什么？提前致谢!

Answer 1

绝对定位的元素脱离了文档的自然流，这意味着您的容器的高度和宽度为零。

当然，零高度和宽度的 10% 和 50% 为零。

如果您为容器指定高度和宽度，您的百分比位置将开始按您的意愿工作。

Here is a working example .

.container { position: relative; width:500px; height:500px; }