入れ子になった div で絶対位置が直接の親から継承されるのはなぜですか?

絶対的な絶対配置の異常

絶対的な配置を伴う多層レイアウトでは、内部 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>

直感的には、 #2nd は #1st 内に絶対的に配置されているため、#3rd の位置は #1st に対して絶対的な相対位置であることが期待されます。しかし、現実には#3rdの絶対的なポジショニングは#2ndから引き継がれている。これは、#2nd のposition:Absolute がその親に対する相対的な位置をリセットし、#3rd が #2nd 内に絶対的に配置されるためです。

この動作は、CSS の特異性ルールに起因する可能性があります。子要素に絶対位置がある場合、その位置は直接の親の境界ボックスによって決まります。この場合、#3rd の位置は #2nd の境界ボックスによって定義され、#1st に対する #2nd の絶対位置は認識されません。

この問題を解決して、#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 中国語 Web サイトの他の関連記事を参照してください。