ヘッダーで `position:Absolute` を使用すると、`linear-gradient` の背景が消えるのはなぜですか?

位置絶対値が線形勾配を打ち破る: 謎を解く

Web ページ内でヘッダーを一元化し、多様なページに簡単に適応する試みビューポートの解像度に応じて、開発者は絶対配置戦略を実装しました。しかし、この一見簡単そうに見える解決策は予期せぬ問題を抱えていました。線形グラデーションの背景が消えたように見えました。

調査の結果、開発者はヘッダー要素が CSS コードから削除されると、グラデーションの背景が元の状態に見えることに気付きました。この謎めいた現象は、問題が絶対位置と背景の勾配の間の相互作用から生じたことを示唆しています。

CSS 仕様を深く掘り下げると、絶対位置がドキュメントの流れから要素を事実上削除していることが明らかになりました。新しいスタッキング コンテキストを作成します。その結果、body 要素に適用された背景のグラデーションが、絶対に配置されたヘッダー要素の下に表示されなくなりました。

これを修正するために、body 要素に最小の高さを追加するという、シンプルかつ効果的な解決策が実装されました。これにより、背景のグラデーションに表示するのに十分なスペースが確保され、中断することなくヘッダー要素の下に表示できるようになりました。したがって、ヘッダー要素は完全に集中化されたままで、とらえどころのないグラデーションが復元されました。

以上がヘッダーで `position:Absolute` を使用すると、`linear-gradient` の背景が消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。