相对父，绝对按百分比垂直定位

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％当然为零。

如果您给容器一个高度和宽度，则您的百分比位置将开始按照您的需求工作。

这是一个有效的例子。

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

Answer 2

welp，我在SE中的第一篇文章。对于那些将来看到的人，您实际上可以将视口高度用作百分比的度量。

.container {
    position: relative;
    top: 10vh;  // 10% of height from top of div
}

Answer 3

您可能需要将height: 100%添加到.container DIV：

.container { height: 100%; position: relative; }

以及所有祖先元素：

html, body { height: 100%; }

Answer 4

@jaime dixon的答案很棒。美丽，两个伟大的概念。

1. 百分比，相对单元相对于某些东西，您必须了解计算这些值的参考容器。

2. 即使您有容器，如果容器的尺寸为"自动"，也可能会有任意行为。因此，要拥有可预测的行为，请确保容器的维度比简单说"自动"更好。或者，如果您的容器也有100％及其父母等等，请确保您有一个CSS指令，其中指定了元素的高度HTML，Body：

示例：

html, body {
    height: desired_value;
}