为什么相对定位元素中的绝对定位元素会从其直接父级继承其位置？

相对定位中的绝对定位：为什么层次结构很重要

在 HTML 中，元素的位置由 CSS 定位属性决定。当一个元素被分配绝对定位时，它会从文档中的正常流中删除，并且它的位置是相对于其最近的祖先使用position:absolute或position:relative来定义的。

问题：

考虑以下 HTML 结构：

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

如果第一个 div 的位置：relative，第二个 div 的位置：absolute，第三个 div 的位置：absolute ，为什么第三个div相对于第二个div而不是第一个div绝对定位？

答案：

理解这种行为的关键在于绝对的方式定位影响子元素的位置。

当一个元素绝对定位时，它包含的任何子元素也相对于它绝对定位，即使这些子元素有自己的绝对定位。这是因为绝对定位有效地重置了子元素的默认相对定位。

在我们的示例中，第三个 div 相对于第二个 div 绝对定位，因为第二个 div 具有position:absolute。第一个 div 的绝对定位（位置：relative）对第三个 div 的定位没有影响，因为它不是第三个 div 的直接祖先。

实现拥有第三个 div 的所需行为div 相对于第一个 div 绝对定位，我们需要从第二个 div 中删除绝对定位，并使第三个 div 成为第一个 div 的直接子元素：

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

以上是为什么相对定位元素中的绝对定位元素会从其直接父级继承其位置？的详细内容。更多信息请关注PHP中文网其他相关文章！