Pourquoi le dégradé d'arrière-plan disparaît-il lors de l'utilisation d'éléments positionnés de manière absolue ?

Comprendre la disparition du dégradé d'arrière-plan avec un positionnement absolu

Lors de l'application d'un positionnement absolu à un élément, il est essentiel de s'assurer qu'il y a suffisamment d'espace pour celui-ci dans son conteneur . Dans ce cas, le problème se pose lorsque la hauteur de l'élément de corps est insuffisante pour accueillir l'en-tête positionné de manière absolue.

L'en-tête, initialement positionné au milieu de l'écran en utilisant haut : 50 % et gauche : 50 % , obscurcit le dégradé d'arrière-plan. Cela se produit parce que l'en-tête est placé au-dessus du dégradé, ce qui entraîne sa disparition.

Résoudre le problème : donner de la hauteur au corps

Pour résoudre ce problème, il est crucial de fournir un hauteur par rapport à l'élément de corps. En introduisant min-height: 100vh dans le CSS, vous garantissez que le corps s'étend sur toute la hauteur de la fenêtre. Cela garantit qu'il y a suffisamment d'espace pour l'en-tête positionné de manière absolue sans interférer avec le dégradé d'arrière-plan.

Voici le code mis à jour qui résout le problème :

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

Avec cette modification, l'arrière-plan le dégradé restera visible même avec l’en-tête positionné de manière absolue. Cette méthode assure à la fois la centralisation souhaitée de l'en-tête et la préservation du dégradé.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!