要素を絶対位置に配置すると線形グラデーションが消えるのはなぜですか?

要素が完全に配置されると線形グラデーションが消えるのはなぜですか?

テキストのブロックを画面上で垂直方向および水平方向に集中させるために、ユーザーは位置を使用することがよくあります。 : 要素の絶対プロパティ。ただし、この配置により、線形グラデーションの背景が消える可能性があります。

この問題を解決するには、body 要素に背景を表示するのに十分な高さがあることを確認してください。高さを設定しないと、背景はページにコンテンツがある場合にのみ表示され、要素が絶対に配置されている場合にグラデーションが消える可能性があります。

たとえば、 min-height: 100vh を追加すると、 body 要素は、要素の位置に関係なく、背景が常に表示されるようにします:

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

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}</code>

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