絶対配置内の絶対配置

Web ページのレイアウトを操作する場合、要素を正確に配置するために絶対配置などの配置テクニックを使用するのが一般的です。ページ。ただし、それ自体が絶対配置されている要素内に絶対配置を適用しようとすると、潜在的な問題が発生します。

相対配置 (position:relative) を持つコンテナー要素 (1 番目の div) があるとします。子要素をそれ自体の位置を基準にして配置します。このコンテナ内には、絶対位置の要素 (2 番目の div) と、2 番目の div 内にネストされた 3 番目の絶対位置の要素 (3 番目の div) があります。

このシナリオでは、3 番目の div が絶対位置に配置されることが期待されるかもしれません。 2 番目の div も絶対的な位置にありますが、1 番目の div に対して相対的に配置されます。しかし、これは当てはまりません。

位置決め階層を理解する

この動作の理由は、絶対位置決めの仕組みにあります。要素に絶対配置が与えられると、その要素はドキュメントの通常のフローから削除され、代わりに最も近い位置にある祖先を基準にして配置されます。この場合、1 番目の div にも相対位置があるかどうかに関係なく、2 番目の div は 3 番目の div の最も近い位置にある祖先になります。

これは、3 番目の div の絶対位置が 2 番目の div を基準にして計算されることを意味します。最初の div の位置ではなく、div の位置です。その結果、3 番目の div は、1 番目の div ではなく、2 番目の div 内に絶対的に配置されて表示されます。

代替配置テクニック

3 番目の div を次のようにしたい場合は、 1 番目の div に対して絶対的に配置されている場合は、それを 1 番目の div の直接の子にする必要があります。これにより、3 番目の div が 1 番目の div の絶対位置を継承し、それに応じて配置されるようになります。

position:Absolute は、position:relative と同様に、子の相対位置をリセットすることに注意することが重要です。したがって、相対的に配置された親要素内に絶対的に配置された子要素が複数ある場合、それらの位置は、最も近い絶対的に配置された祖先を基準として、独立して計算されます。