相対的に配置された要素内の絶対的に配置された要素がその位置を直接の親から継承するのはなぜですか?

相対配置内の絶対配置: 階層が重要な理由

HTML では、要素の配置は CSS 配置プロパティによって決定されます。要素に絶対位置が割り当てられると、その要素はドキュメント内の通常のフローから削除され、代わりに、その位置は、position:Absolute または Position:relative を使用して最も近い祖先を基準にして定義されます。

質問:

次の HTML 構造を考えてみましょう。

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

最初の div の位置が相対的である場合、2 番目の div の位置は絶対的で、3 番目の div も位置: 絶対的です。 、なぜ 3 番目の div は最初の div ではなく 2 番目の div に対して絶対相対的に配置されているのですか?

答え:

この動作を理解する鍵は、絶対的な方法にあります。配置は子要素の位置に影響します。

要素が絶対配置されると、それらの子要素に独自の絶対配置がある場合でも、それに含まれる子要素もその要素に対して絶対相対的に配置されます。これは、絶対配置によって子要素のデフォルトの相対配置が事実上リセットされるためです。

この例では、2 番目の div の位置が絶対であるため、3 番目の div は 2 番目の div に対して絶対相対的に配置されます。最初の div の絶対的な配置 (position:相対的) は、3 番目の div の直接の祖先ではないため、3 番目の div の配置には影響しません。

3 番目の div を持つという望ましい動作を実現するにはdiv が最初の div に対して絶対相対的に配置されている場合は、2 番目の div から絶対位置を削除し、3 番目の div を最初の div の直接の子にする必要があります:

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

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