基于父元素宽度的绝对定位顶部属性

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

- GhitaB

---

也许使用类似 SCSS 的东西会起作用？ - qwertynl

你能详细解释一下吗？通常为什么会担心顶部和宽度的问题。 - Arunkumar Srisailapathi

divs 的宽度是动态的还是固定的尺寸？ - Josh Powell

@ArunKumar 我只是好奇。 :) - GhitaB

Answer 1

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

在上下padding或margins中使用百分比值是相对于包含块的width的。

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

JSFiddle演示。

另外，值得一看的是Louis Lazaris的CSS中的垂直百分比文章。

- Hashem Qolami

Answer 2

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

- Cristina Cristea

---

当我调整浏览器窗口宽度时，我希望看到文本垂直移动并保持相同的纵横比。 - GhitaB

我认为如果这是你需要的话，这不会起作用。 - Cristina Cristea