固定要素が配置されていない兄弟の影響を受けるのはなぜですか?

固定要素の動作を理解する: 配置されていない兄弟によって影響を受ける理由

CSS の配置の領域では、次のようになります。なぜ、position:fixed を持つ要素が、位置決めされていない兄弟要素の影響を受けるのか、困惑しています。ただし、基礎となる仕組みを理解すると、論理的な説明が明らかになります。

position:fixed を持つ要素は、通常のドキュメント フローから削除され、ブラウザーのビューポートを基準にして配置されます。ビューポートは、ブラウザ ウィンドウ内の Web ページの表示領域です。

指定した例では、ヘッダー要素は固定されていますが、メイン要素の margin-top: 90px が設定されています。驚くべきことに、ヘッダーはマージンの影響を受けたかのように下に移動します。

この動作を理解するには、CSS マージンの折りたたみの役割を考慮する必要があります。マージンのある 2 つの要素が接触すると、それらのマージンは 1 つのマージンに結合されます。この場合、body 要素 (メイン要素の親) のデフォルトのマージンは 8px です。メイン要素のマージントップの 90 ピクセルが適用されると、マージンの折りたたみが発生し、結合されたマージンが 98 ピクセルになります。

この結合されたマージンにより、本文要素とメイン要素の両方が下に 98 ピクセル移動します。ヘッダーはビューポートに対して固定されているため、ドキュメント フロー内の要素に基づいて計算されるビューポートとともに移動します。メイン要素は最初のフロー要素であるため、そのマージンがビューポートの計算に影響し、ヘッダーが下に移動して見えるようになります。

本質的に、固定ヘッダーの位置は、非要素の影響を直接受けません。 -物理的な位置の点で兄弟に位置します。ただし、兄弟のマージンはビューポートの計算に影響し、ヘッダーの見かけの動きに間接的に影響します。

以上が固定要素が配置されていない兄弟の影響を受けるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。