要素に対して `position:absolute` を使用すると線形グラデーションが消えるのはなぜですか?

Angular Freak: Position:absolute によるグラデーションの消失を解消する

要素をposition:absoluteに設定すると線形グラデーションが消えるのはなぜですか?

シナリオ:

グラデーションの背景を作成し、テキスト ブロックを水平方向の中央に配置したいと考えています。解像度間の互換性を目指して、広く使用されている位置合わせ手法を使用して、ヘッダー要素を絶対要素として配置しました。ただし、この変更により、グラデーションの背景が予期せず消失してしまいました。

分析:

適用した配置方法により、ヘッダーが通常のドキュメント フローの外に押し出されます。 、その結果、背景が切り取られます。これは、body 要素のデフォルトの高さが auto であり、コンテンツに合わせて縮小できるためです。その結果、ヘッダーが配置されている領域には背景の一部が入り込まず、ヘッダーが見えなくなります。

解決策:

この問題を解決するには、次のことを行う必要があります。ヘッダーの位置に関係なく、背景が表示されたままであることを確認します。これは、body 要素の min-height プロパティを調整して、ヘッダーと背景の両方に合わせて適切な高さを維持するように強制することで実現できます。

body に min-height: 100vh を定義することで、少なくともビューポートの高さいっぱいまで伸びることを保証します。これにより、グラデーションの背景が占めるスペースが作成され、ヘッダーの望ましい配置を維持しながら、その可視性が確保されます。

コード スニペット:

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

結論:

body 要素の min-height プロパティを変更することで、ヘッダー要素の望ましい位置を維持しながら、背景を表示したままにすることができます。これにより、グラデーションの背景が消える問題に効果的に対処でき、シームレスなグラデーションの背景を備えた集中ヘッダーという目標を達成できるようになります。

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