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

我正在尝试按百分比创建一个垂直定位的DIV。我将父容器设置为相对，将content 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>

.container{
位置：相对位置；
}
.内容{
位置：绝对位置；
左：10%；
最高：50%；
}
这是内容分区。它应该是容器分区左侧的10%。

---

content div显示在页面顶部，忽略50%的垂直位置。我错过了什么？提前谢谢

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

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

如果你给你的容器一个高度和宽度，你的百分比位置将开始发挥你想要的作用

---

您可能需要将

高度：100%

添加到您的

容器中

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

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

html, body { height: 100%; }

@杰米·迪克森的回答很好。很好，这里给出了两个很棒的概念

百分比，相对单位是相对于某个东西的，您必须了解这些值计算到的参考容器是什么

即使您有一个容器，如果容器的维度为“auto”，也可能存在任意行为。因此，要获得可预测的行为，请确保容器具有比简单地说“auto”更好的维度。或者，如果您的容器也有100%及其父对象等，请确保您有一个css指令，其中指定了元素html的高度，body:

例如：

html, body {
    height: desired_value;
}

Welp，我在SE的第一篇帖子。对于将来看到这一点的人，实际上可以使用视口高度作为百分比的度量

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

谢谢你的提示-不幸的是它没有工作。有没有一个基本的概念我在这里遗漏了，比如你不能在一个相对的父对象中用AP垂直定位div的百分比？@user1801221不，我不这么认为。这个概念很好。杰米·迪克森让它工作了。我猜你的
.container
的某个地方有一个元素导致它没有你想要的高度。就像一个符咒！非常感谢！但是如果我想要一个液体布局，并将容器的高度和宽度设置为不起作用的百分比。你需要问一下你的百分比是多少。在这种情况下，它们很可能是相对于主体的，如果主体没有设置宽度或高度，并且没有扩展以适应其内容，那么您将再次处理零的x%。这里有一个很好的例子：非常好，我将根据你的评论写一篇评论。
.container {
    position: relative;
    top: 10vh;  // 10% of height from top of div
}