兄弟ヘッダーが移動するときに固定ヘッダーが移動するのはなぜですか?

固定ヘッダーの運動性: 謎を解く

質問:

不動であるはずなのに、位置を持つ要素がなぜ移動しないのか: 位置決めされていない兄弟と並んで固定シフトですか?

答え:

固定要素はブラウザ ウィンドウに固定されて表示されますが、その位置はビューポートを基準にして計算されます。ドキュメント フロー内の要素が含まれます。この場合、ドキュメント フローの最初の要素は非ヘッダー div であるため、ビューポートは margin-top 属性が適用された後に決定されます。

したがって、margin-top: 90px が非ヘッダーに適用されると、 header div:

1. ボディ要素のデフォルトのマージン (8px) は、メイン要素のマージントップ (90px) と折り合います。
2. 両方の要素が 90px ずつ下にシフトします。位置: 固定のヘッダー要素。
3. これは、ビューポートが固定要素ではなく、ボディ要素の先頭から計算されるためです。

結論:

固定要素は、ドキュメント フローから削除されたにもかかわらず、そのフロー内の要素の位置の影響を受け続けます。この関係を理解することは、Web ページ上で正確なレイアウトと配置を行うために非常に重要です。

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