絶対位置/固定位置の要素が間違って配置されるのはなぜですか?

間違って配置された絶対/固定要素の謎: 位置とコンテキストを理解する

CSS レイアウトでの絶対要素または固定要素の動作を理解する要素の配置が重要です。ただし、この点に関して問題が発生したため、その背後にある理由を明らかにするためにここにいます。詳細を見ていきましょう:

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

あなたの期待は、灰色のボックスがコンテナーの左上隅に配置されることでした。 、と思ったのですが、結局外側に配置されてしまいました。その理由は、適用したプロパティにあります:

• 灰色のボックスの位置は絶対です。これにより、位置が親要素から独立します。
• ただし、親要素であるコンテナの位置は相対的になります。これにより、灰色のボックスの新しい位置コンテキストが作成されます。
• この位置コンテキスト内で、灰色のボックスの上: 0 と左: 0 の値は、現在の位置での親の左上隅を基準にしています。
• ただし、オレンジ色のボックスの top: 100px プロパティで指定されているように、コンテナの上端の余白は 100px であることに注意してください。これにより、親の左上隅と実際の視覚的な位置の間にギャップが生じ、その結果、灰色のボックスが表示領域の外側に配置されます。

ケース 2: 灰色のボックスがオレンジ色のボックスに置き換えられる

2 番目のケースでは、灰色のボックスをコンテナ内の 2 番目の子として移動すると、オレンジ色のボックスに続いて右に移動しているように見えます。 箱。これは次の理由によるものです:

• オレンジ色のボックスの位置:相対は、新しい位置決めコンテキストを確立します。
• このコンテキスト内で、灰色のボックスの上: 0 と左: 0 の値はオレンジ ボックスの左上隅を基準にします。
• オレンジ ボックスの左: 100px プロパティは、オレンジ ボックスを次の位置にプッシュします。その結果、灰色のボックスがこの変位に従い、右にシフトして表示されます。

以上が絶対位置/固定位置の要素が間違って配置されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。