CSS 相对父级，按百分比垂直绝对定位？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13239549/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Relative parent, absolute positioning vertically by percentage?
提问by user1801221
I'm trying to create a vertically positioned DIV by percentage. I have the parent container to set to relative and the content div set to absolute. This works fine when I position the content div with pixels, but when I try percentages the percentages are disregarded:
我正在尝试按百分比创建垂直定位的 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>
The content div appears at the top of the page, disregarding the 50% vertical placement. What am I missing? Thanks in advance!
内容 div 出现在页面顶部，不考虑 50% 的垂直位置。我错过了什么？提前致谢！
回答by Jamie Dixon
The absolutely positioned element is taken out of the natural flow of the document which means your container has zero height and width.
绝对定位元素从文档的自然流中取出，这意味着您的容器的高度和宽度为零。
10% and 50% of that zero height and width are, of course, zero.
当然，零高度和宽度的 10% 和 50% 为零。
If you give your container a height and width, your percentage positions will start to work as you want.
如果你给你的容器一个高度和宽度，你的百分比位置将开始如你所愿。
.container { position: relative; width:500px; height:500px; }
回答by Eddo Hintoso
Welp, my first post in SE. For those of you seeing this in the future, you can actually use viewport height as a measure of percentage.
嗯，我在 SE 的第一篇文章。对于将来看到这一点的人，您实际上可以使用视口高度作为百分比的度量。
.container {
position: relative;
top: 10vh; // 10% of height from top of div
}
回答by Kevin Boucher
You will likely need to add height: 100%to your .containerdiv:
您可能需要添加height: 100%到您的.containerdiv：
.container { height: 100%; position: relative; }
and possibly all the ancestor elements:
可能还有所有祖先元素：
html, body { height: 100%; }
回答by David L
@Jaime Dixon's answer was great. Beautiful, two great concepts given there.
@Jaime Dixon 的回答很棒。美丽，那里给出了两个伟大的概念。
The percentage, the relative units are relative TO SOMETHING, you must understand what's the reference container to which those values are calculated.
Even if you have a container, there CAN BE an arbitrary behavior if the container has it's dimensions as "auto". So, to have a predictable behavior, be sure that the container has a dimension better than simply saying "auto". OR, if your container also has 100%, and its parent and so on, make sure you have a css instruction in which you have specified the height of the elements html, body:
百分比，相对单位是相对于某些东西的，您必须了解计算这些值的参考容器是什么。
即使您有一个容器，如果容器的尺寸为“自动”，也可能存在任意行为。因此，要获得可预测的行为，请确保容器具有比简单地说“自动”更好的维度。或者，如果您的容器也有 100% 及其父级等等，请确保您有一个 css 指令，其中指定了元素 html、body 的高度：
example:
例子：
html, body {
height: desired_value;
}
