絶対位置/固定位置の要素がオフロケーションで表示されるのはなぜですか?

場所外にある絶対/固定配置要素

CSS の配置では、絶対と固定は混乱を招く可能性があり、位置ずれが発生することがあります。ここでは、そのような要素が期待どおりに表示されない理由について説明します。

ケース 1: 相対親の外側にある絶対的な灰色のボックス

要素が絶対的に配置されている場合、その位置は次のようになります。非静的な位置で最も近い祖先を基準にして取得されます。この場合、親 .container の位置は相対的です。ただし、絶対灰色のボックスは、上部が自動 (デフォルト) に設定されているため、コンテナの外側にあります。

CSS 仕様に従って、上部と下部が自動で、高さが自動ではない場合、上部が設定されます。静止位置に戻ります。この位置は、要素が絶対に配置されていない場合は要素の位置によって決定されます。

この場合、その前にマージンやパディングがないため、灰色のボックスの静的位置はコンテナの外側になります。したがって、グレーのボックスは、コンテナではなくドキュメント本文の左上隅に配置されます。

ケース 2: グレーのボックスがオレンジ ボックスの後の左上隅にない

灰色のボックスを 2 番目の位置に移動すると、オレンジ色のボックスが残したスペースの後に配置されます。これは、オレンジ色のボックスにposition:relativeがあり、新しいスタッキング コンテキストが作成されるためです。

スタッキング コンテキスト内の要素は、そのコンテキスト内で最も近い位置にある祖先を基準にして配置されます。灰色のボックスは、コンテナのスタッキング コンテキスト内で次に配置される要素であるため、オレンジ色のボックスの後に配置されます。

結論

絶対配置と固定配置を管理するルールを理解することは、次のとおりです。要素を正確に配置するために重要です。静的な位置、コンテキストの積み重ね、配置された要素と配置されていない要素の関係を考慮することで、開発者は要素が意図したとおりに配置されていることを確認できます。

以上が絶対位置/固定位置の要素がオフロケーションで表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。