Question

我有3个div元素。

第一个div更大（换行）并且position:relative;

第二div位于第一个div相对定位的绝对位置（并包含在第一个div中）

第三div包含在第二个div中，并且还具有绝对定位。

<div id="1st">
   <div id="2nd">
     <div id="3rd"></div>
   </div>
</div>

为什么第3个div位置绝对是第2个div（也是第1个div的绝对位置）而不是第1 div个相对位置？

因为第3个div绝对定位于绝对定位的第2 div。

Answer 1

因为position: absolute重置儿童的相对位置，就像position: relative那样。

没有办法解决这个问题 - 如果你想让第三个div相对于第一个绝对定位，你必须让它成为第一个的孩子。

Answer 2

position:relative和position:absolute都将包含元素作为定位提升者。

如果您需要根据div 1定位div 3，则将其设为div 1的直接子项。

请注意，position: relative表示元素相对于其自然位置定位，而position: absolute表示元素相对于其第一个position:relative定位或position:absolute祖先。

Answer 3

位置静态：静态位置是元素的默认方式将出现在您的正常流程中如果根本没有指定位置，则为HTML文件。

重要提示：top，right，bottom和left属性对静态无效定位元素。

位置相对：使用相对值定位元素会使元素（及其占用的空间）保持在HTML文件的正常流程中。

然后，您可以使用属性left，right，top和bottom将元素移动一定数量。但是，这可能会导致元素与其他元素重叠页面 - 可能会或可能不是您想要的效果。

相对定位的元素可以从其位置移动，但它占据的空间仍然存在。

绝对位置：将绝对位置值应用于元素会将其从正常流程中删除。移动绝对定位元素时，其参考点是其最近的包含元素的顶部/左侧，其具有声明为非静态的位置 - 也称为其最近的定位上下文。因此，如果不存在包含静态位置的元素，那么它将从左上角定位身体元素。

在你的情况下，第3个最近的包含容器是第2个。

Answer 4

又一个明确的答案。

您当前的情况如下：

#my-parent {position: absolute}
#my-parent .my_child {position: absolute}

你有点挣扎。

如果您可以更改HTML，只需执行以下操作：

#my-parent {position: absolute}
#my-parent .my-wrapper {position: relative}        /* Since you've added the wrapper in HTML */
#my-parent .my-wrapper .my-child {position: absolute}  /* Now you can play with it */

Answer 5

第三个div元素绝对位于第二个div元素的原因是因为CSS规范解释here，因为＆＃34; parent＆＃34; 绝对定位元素的元素（更好地说：包含块）不是必然是它的直接父元素，而是它的直接定位元素，即任何元素其位置设置为除static以外的任何内容的元素，例如position: relative/absolute/fixed/sticky;

因此，只要有可能，您的代码中，如果您希望第3个div元素与第1个div绝对定位，那么您应该将第2个div元素设为{{1这是它的默认值（或者只是删除第二个position: static;元素的规则集中的任何position: ...声明。）

以上将使第3个div 包含第3个绝对定位div，忽略第2个div用于此定位目的。

希望它有所帮助。

Answer 6

万一有人还在寻找答案。

我能够通过向第一个绝对定位的div添加clear: both;样式来实现此结果，该样式将重置子代并允许其使用自己的absolute定位。

绝对定位在绝对位置内

6 个答案: