絶対に配置された要素を使用すると背景のグラデーションが消えるのはなぜですか?

絶対配置による背景のグラデーションの消失を理解する

要素に絶対配置を適用する場合、コンテナ内にその要素のための十分なスペースがあることを確認することが重要です。この例では、絶対に配置されたヘッダーを収容するには body 要素の高さが不十分な場合に問題が発生します。

ヘッダーは、最初は上: 50% と左: 50% を使用して画面の中央に配置されます。 、背景のグラデーションを隠します。これは、ヘッダーがグラデーションの上に配置され、ヘッダーが消えるために発生します。

問題の解決: ボディに高さを提供する

この問題に対処するには、ヘッダーを提供することが重要です。 body要素までの高さ。 CSS に min-height: 100vh を導入すると、本文がビューポートの高さ全体に広がることが保証されます。これにより、背景のグラデーションを妨げることなく、絶対に配置されたヘッダーに十分なスペースが確保されます。

問題を解決する更新されたコードは次のとおりです。

<code class="css">body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}</code>

この変更により、背景がヘッダーが絶対位置にある場合でも、グラデーションは表示されたままになります。この方法では、ヘッダーの望ましい集中化とグラデーションの維持の両方が保証されます。

以上が絶対に配置された要素を使用すると背景のグラデーションが消えるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。