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; }

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的答案很棒。那里有美丽的两个伟大概念。

百分比，相对单位是相对于SOMETHING，您必须了解这些值的计算参考容器是什么。
即使你有一个容器，如果容器的尺寸为“auto”，则可能存在任意行为。因此，要拥有可预测的行为，请确保容器的维度优于简单地说“auto”。或者，如果您的容器也有100％，并且其父级等等，请确保您有一个css指令，其中您已指定了元素html的高度，正文：

示例：

html, body {
    height: desired_value;
}

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

4 个答案: