Question

请耐心等待...并原谅我（可能）不正确的术语：

在下面的代码中，我不明白为什么你将包含（parent）div设置为'position：relative'，以便div里面的div相对于父div定位（使用'position：absolute）。我认为，为了使这种情况发生，儿童div将被设置为“相对”父母。我是否明白，基本上父母div对其他div内部说“嘿，你现在可以全部定位'相对'我！”我有点期待它反过来工作。

E.g。我预计文本将被定位为“相对”包含div。有人能解释为什么它的工作方式与此相同吗？感谢。

<div id="backgroundImage">
    <h2 class="titleBox">I AM A TITLE</h2>
    <p class="textBox">I am a description box</p>
</div>

#backgroundImage {
position: relative;
height: 225px;
width: 300px;
background-image: url (#);
}

.titleBox {
position: absolute;
top: 15px;
left: 0;
}

.textBox {
position: absolute;
bottom: 10px;
left: 0;

}

Answer 1

documentation解释得非常好，但我会总结一下。

具有position：relative的元素首先布局，就像任何静态元素一样......根据top，bottom，left和right属性进行移位/ p>

可以相对于其父级调整position: relative框（即使其父级是静态的）。

对于position: absolute，

包含块是最近的祖先。 “定位”是指一个元素，其position属性设置为relative，absolute或fixed

也就是说，top元素上的bottom，position: absolute等属性相对于除position以外的static的最近包含元素}（包括relative）。

也就是说position: absolute个元素仍可以相对定位。

Answer 2

您绝对定位子元素，即您为它们指定x / y坐标（使用left和top属性）。

默认情况下，这些文件将完全定位到文档，但通过将父容器设置为position:relative，它们将以绝对方式相对于该div定位。

Answer 3

如果将元素设置为“绝对”位置，则它将超出DOM。因此，您可以设置您想要的位置，除非或直到您的绝对元素父级或父级的父级...没有任何位置相对。实际上我们使用位置相对的原因是如果你想要与容器内的其他元素无关地设置元素的样式，你可以设置相对于父元素的位置（表示容器）。如果#backgroundImage没有位置相对，你的子元素将进入你的屏幕的初始位置，但如果你想要在你的页面中间的某些地方，你必须将“backgroundImage”元素设置为position：relative ..然后是子元素将在你的“backgroundImage”容器内飞行。

我想完全掌握包含div的'position：relative'的概念

3 个答案: