固定位置の要素がその兄弟要素とともに移動する可能性があるのはなぜですか?

固定位置要素が兄弟要素とともに移動する理由

position:fixed を指定してドキュメント フローから削除されたにもかかわらず、要素は依然として移動することができます兄弟の影響を受ける。これは、ビューポートの計算方法が原因で発生します。

ビューポートは、ユーザーに表示されるブラウザ ウィンドウ内の領域です。これは、通常のドキュメント フローに参加する要素であるインフロー要素を使用して計算されます。

提供された HTML では、最初のインフロー要素は

で、これには margin-top が付いています。 ：90ピクセル。

以降要素は固定されており、ビューポートの計算では考慮されません。

ただし、

のデフォルトのマージンは 8px です。要素は

のマージンとともに折りたたまれます。これにより、両方の要素が 90 ピクセル下に移動し、固定ヘッダーの位置に影響します。

これを修正するには、単にヘッダー CSS に top: 0 を追加して、ヘッダーをビューポートの上部に配置します。兄弟要素のマージン。

以上が固定位置の要素がその兄弟要素とともに移動する可能性があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。