根据父宽度定位绝对顶部属性

Question

拥有以下HTML

<div class="child-of-body">
    This is a text
</div>

和以下CSS

.child-of-body {
    position: absolute;
    top: 10%;
}

我可以设置所选元素的top值。 我看到10%是根据父高度计算的。

如何根据父宽度设置top属性的百分比值？

我知道这可以通过JavaScript实现，但只能用CSS吗？

JSFIDDLE

Answer 1

我认为你正在寻找margin-top财产。

顶部/底部padding或margins的百分比值相对于包含块的width。

.child-of-body {
    position: absolute;
    margin-top: 10%;
}

<强> JSFiddle Demo

此外，值得一看 Louis Lazaris的 Vertical Percentages in CSS 文章。

Answer 2

尝试为父元素添加position: relative。