絶対位置の要素がその直接の祖先ではなく、最も近い絶対位置の親からその位置を継承するのはなぜですか?

絶対配置内でネストされた絶対配置

Web ドキュメント内では、CSS 位置プロパティを使用して要素を配置できます。相対に設定すると、要素は通常の位置に対して相対的に配置されますが、絶対的には、最も近い位置にある祖先に対して絶対的に相対的に要素が配置されます。

提供されたシナリオには、3 つの div 要素があります:

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

• #1st の位置: 相対的です。
• #2nd は #1st を基準にして絶対的に配置されます。
• #3rd は #2nd を基準にして絶対的に配置されます。

疑問が生じます:なぜ #3rd は、その直接の祖先である #1st ではなく #2nd に対して相対的に絶対的に配置されるのですか?

答えは、絶対配置の動作にあります。要素が絶対的に配置されると、その子の位置がリセットされます。この場合、#2nd は #1st に対して絶対的に配置されるため、#2nd の子 (#3rd を含む) はすべて #2nd に対して絶対的に配置されます。この動作は意図的なものであり、回避することはできません。

最も外側の div (#1st) を基準とした絶対的な位置を実現するには、#3rd を #1st の直接の子にする必要があります:

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

この配置により、#3rd は、最も近い位置にある祖先である #1st に対して絶対的に相対的に配置されることが保証されます。

以上が絶対位置の要素がその直接の祖先ではなく、最も近い絶対位置の親からその位置を継承するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。