为什么绝对定位元素从其最接近的绝对定位父元素继承其位置，而不是其直接祖先？

嵌套在绝对定位中的绝对定位

在 Web 文档中，可以使用 CSS 位置属性来定位元素。当设置为relative时，元素相对于其正常位置定位，而absolute则绝对相对于其最近定位的祖先定位元素。

在提供的场景中，存在三个div元素：

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

• #1st 的位置：相对。
• #2nd 相对于 #1st 绝对定位。
• #3rd 相对于 #2nd 绝对定位。

问题出现了：为什么#3rd 是相对于#2nd 绝对定位的，而不是它的直接祖先#1st？

答案在于绝对定位的行为。当一个元素被绝对定位时，它会重置其子元素的位置。在这种情况下，#2nd 相对于 #1st 绝对定位，因此 #2nd（包括 #3rd）的任何子级都相对于 #2nd 绝对定位。此行为是故意的，无法绕过。

要实现相对于最外层 div (#1st) 的绝对定位，#3rd 必须成为 #1st 的直接子级：

<code class="html"><div id="1st">
  <div id="3rd"></div>
</div></code>

这种安排确保 #3rd 相对于其最近的定位祖先（即 #1st）绝对定位。

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