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

【问题标题】：Position absolute top property based on the parent width根据父宽度定位绝对顶部属性
【发布时间】：2014-02-21 10:21:18
【问题描述】：

具有以下 HTML

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

以及下面的 CSS

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

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

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

我知道这可以通过 JavaScript 实现，但是仅使用 CSS 可以吗？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

我认为您正在寻找 margin-top 属性。

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

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

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

【讨论】：