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中文网其他相关文章!