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

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演示.

另外,值得一看的是Louis Lazaris 在CSS文章中的垂直百分比.