22

我正在尝试按百分比创建垂直定位的 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% 的垂直位置。我错过了什么？提前致谢！

4

4 回答 4

28

绝对定位的元素是从文档的自然流中取出的，这意味着您的容器的高度和宽度为零。

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

如果你给你的容器一个高度和宽度，你的百分比位置将开始按照你的意愿工作。

这是一个工作示例。

.container { position: relative; width:500px; height:500px; }
于 2012-11-05T20:09:48.110 回答
10

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

.container {
    position: relative;
    top: 10vh;  // 10% of height from top of div
}
于 2016-01-09T07:13:54.830 回答
1

您可能需要添加height: 100%到您的.containerdiv：

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

可能还有所有的祖先元素：

html, body { height: 100%; }
于 2012-11-05T20:10:13.840 回答
1

@Jaime Dixon 的回答很棒。美丽，那里给出了两个伟大的概念。

  1. 百分比，相对单位是相对于某事的，您必须了解计算这些值的参考容器是什么。

  2. 即使您有一个容器，如果容器的尺寸为“自动”，则可能存在任意行为。因此，要具有可预测的行为，请确保容器具有比简单地说“自动”更好的维度。或者，如果您的容器也有 100% 及其父级等，请确保您有一个 css 指令，其中您已指定元素 html、body 的高度：

例子：

html, body {
    height: desired_value;
}
于 2015-06-24T15:41:03.113 回答