ホームページ > ウェブフロントエンド > CSSチュートリアル > 固定位置の要素がその兄弟要素とともに移動する可能性があるのはなぜですか?

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

Patricia Arquette
リリース: 2024-10-24 18:43:26
オリジナル
482 人が閲覧しました

Why Can a Fixed-Positioned Element Shift with Its Sibling Elements?

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

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

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

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

で、これには margin-top が付いています。 :90ピクセル。
以降要素は固定されており、ビューポートの計算では考慮されません。

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

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

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

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

ソース:php
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート