固定ヘッダーが位置決めされていない兄弟と一緒に移動するのはなぜですか?

固定要素の動作を理解する: 固定ヘッダーが位置決めされていない兄弟と一緒に移動する理由

CSS の固定位置により、要素は固定要素に配置されます。ビューポートを基準とした位置。ただし、ビューポートは通常のドキュメント フロー内の要素に基づいて計算されることを理解することが重要です。

提供された HTML では、ヘッダー要素は固定されていますが、メイン要素には margin-top が適用されています。これらの要素がドキュメントに配置されると、次の処理が行われます:

1. 固定ヘッダー: ヘッダー要素 (位置: 固定) はドキュメント フローから削除され、ビューポートの上部。
2. ドキュメント フローの計算: メイン要素から始まる残りの要素は、ドキュメント フローを確立します。メイン要素に適用される margin-top: 90px は、ヘッダーとメイン コンテンツ間の垂直方向の間隔を表します。
3. ビューポートの計算: ビューポートは、ドキュメント フロー内の要素に基づいて計算されます。 。最初のフロー要素は、margin-top が 90px の main 要素であるため、ビューポートはこの時点から始まります。
4. Margin Collapsing: main の親である body 要素、デフォルトのマージンは 8px です。 CSS マージンの縮小により、メインのマージン上部 (90 ピクセル) がボディのマージン上部 (8 ピクセル) とともに縮小し、マージンの合計は 98 ピクセルになります。

その結果、両方のヘッダーはビューポートに固定されていますが、メイン要素とヘッダーは 98 ピクセル下にシフトします。これは、ビューポート自体がドキュメント フロー内の折りたたまれたマージンに基づいて調整されるためです。

したがって、固定要素はビューポートに対して相対的に配置される一方、ビューポートの位置はその中の要素によって決定されることを考慮することが重要です。通常の書類の流れ。この理解により、固定ヘッダーが配置されていない兄弟要素と一緒に移動できる理由が説明されます。

以上が固定ヘッダーが位置決めされていない兄弟と一緒に移動するのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。