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

絶対位置決めによるグラデーションの消失: 解決策

この技術調査では、線形グラデーションの背景が、要素は絶対的に配置されます。目標は、画面解像度に関係なく、ビューポートの中央に残る中央揃えのヘッダーを作成することです。

提供されているコード スニペットには問題が示されています。ヘッダーに絶対位置が指定されると、グラデーションの背景が消えます。これは、要素がドキュメントの通常のフローから削除され、背景が残されるためです。

この問題を解決するには、body 要素に高さを追加する必要があります。これにより、背景が強制的に適切にレンダリングされ、ヘッダーが完全に配置されている場合でも背景が表示されるようになります。変更された CSS コードを以下に示します。

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

min-height: 100vh を追加することで、ボディの高さがビューポートの高さと同じになるようにします。これにより、ヘッダーのサイズに関係なく、グラデーションの背景がビューポート全体をカバーするようになります。

この変更により、画面解像度が異なっていても、ヘッダーはビューポート内で垂直方向と水平方向の中央に配置されるようになります。背景のグラデーションも表示され、ビューポート全体に広がります。

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