为什么绝对定位继承自嵌套 Div 中的直接父级？

Absolute绝对定位异常

在涉及绝对定位的多层布局中，经常会遇到内层div有绝对定位的场景相对于其直接父级的定位，该父级也绝对定位在另一个 div 中。然而，在这样的设置中，内部 div 从其直接父级继承其绝对位置，导致看似意外的行为。

考虑以下 HTML 结构：

<code class="html"><div id="1st" style="position: relative;">
  <div id="2nd" style="position: absolute;">
    <div id="3rd" style="position: absolute;"></div>
  </div>
</div></code>

直观地说，一个期望 #3rd 的位置是相对于 #1st 的绝对位置，因为 #2nd 绝对位于 #1st 内。然而，现实情况是#3rd 的绝对定位继承自#2nd。这是因为#2nd 上的position:absolute 重置了其相对于其父级的位置，导致#3rd 绝对定位在#2nd 内。

此行为可归因于CSS 特异性规则。当子元素具有绝对位置时，其位置由其直接父元素的边界框确定。在这种情况下，#3rd 的位置由 #2nd 的边界框定义，并且不知道 #2nd 相对于 #1st 的绝对位置。

解决此问题并使 #3rd 绝对定位相对对于#1st，有必要使#3rd 成为#1st 的直接子级。换句话说，以下 HTML 将产生所需的行为：

<code class="html"><div id="1st" style="position: relative;">
  <div id="3rd" style="position: absolute;"></div>
</div></code>

在这种情况下，#3rd 的绝对位置由其父级 #1st 的位置决定，这正是人们所期望的。需要注意的是，通过position:absolute重置父元素的位置也会影响其子元素的位置，除非它们相对于不同的父元素是绝对定位的。

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