Why Does My Linear-Gradient Disappear When I Position an Element Absolutely?

Why Does the Linear-Gradient Disappear When an Element is Positioned Absolutely?

To centralize a block of text vertically and horizontally on the screen, users often employ the position: absolute property for the element. However, this positioning can cause the linear-gradient background to vanish.

To solve this issue, ensure the body element has sufficient height to display the background. Without a set height, the background will only appear when there is content on the page, which can lead to the disappearance of the gradient when the element is positioned absolutely.

For example, adding min-height: 100vh to the body element ensures that the background is always visible, regardless of the element's position:

<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>

The above is the detailed content of Why Does My Linear-Gradient Disappear When I Position an Element Absolutely?. For more information, please follow other related articles on the PHP Chinese website!