1

请容忍我......并原谅我（可能）不正确的术语：

在下面的代码中，我不明白为什么要将包含（父）div 设置为“位置：相对”，以便内部的 div 相对于父 div 定位（使用“位置：绝对”）。我认为为了实现这一点，子 div 将被设置为与父级“相对”。我是否理解父 div 本质上是对内部的其他 div 说“嘿，你们现在都可以被定位为我的‘相对’！” 我有点期望它会反过来工作。

例如，我预计文本会被定位为“相对于”包含的 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;

}
4

3 回答 3

1

文档很好地解释了这一点，但我会总结一下。

具有 position:relative 的元素首先像任何静态元素一样布局...根据、top和bottom属性移动leftright

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

对于position: absolute,

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

也就是说，元素上的top,bottom等属性position: absolute是相对于 a 的最近包含元素而position不是static（包括relative）。

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

于 2013-06-18T08:11:30.887 回答
0

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

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

于 2013-06-18T08:01:07.540 回答
0

如果您将元素设置为“绝对”位置，它将不在 DOM 中。因此，您可以设置任何您想要的位置，除非或直到您的绝对元素父级或父级的父级...没有任何相对位置。我们为什么使用相对位置实际上是如果你想设置元素的样式，而不考虑容器内的其他元素，你可以设置相对于父元素的位置（意味着容器）。如果#backgroundImage 没有相对位置，您的子元素将进入屏幕的初始位置，但是如果您想要在页面中间的某个位置，您必须将“backgroundImage”元素设置为位置：relative .. 然后子元素将在您的“背景图像”容器内飞行。

于 2013-06-18T08:02:23.150 回答