Pourquoi mon arrière-plan dégradé disparaît-il lorsque j'utilise le positionnement absolu ?

Disparition d'un dégradé avec un positionnement absolu : une résolution

Dans cette enquête technique, nous cherchons à comprendre pourquoi un arrière-plan à dégradé linéaire disparaît lorsqu'un L'élément est positionné de manière absolue. L'objectif est de créer un en-tête centré qui reste au centre de la fenêtre, quelle que soit la résolution de l'écran.

L'extrait de code fourni présente le problème. Lorsque l’en-tête reçoit une position absolue, l’arrière-plan dégradé disparaît. En effet, l'élément est supprimé du flux normal du document, laissant l'arrière-plan derrière.

Pour résoudre ce problème, il est nécessaire d'ajouter de la hauteur à l'élément body. Cela forcera l'arrière-plan à s'afficher correctement, le rendant visible même lorsque l'en-tête est en position absolue. Le code CSS modifié est fourni ci-dessous :

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

En ajoutant min-height : 100vh, nous nous assurons que le corps a une hauteur égale à la hauteur de la fenêtre d'affichage. Cela garantit que l'arrière-plan dégradé couvre toute la fenêtre, quelle que soit la taille de l'en-tête.

Avec cette modification, l'en-tête sera désormais centré verticalement et horizontalement dans la fenêtre, même à différentes résolutions d'écran. Le dégradé d'arrière-plan sera également visible et s'étendra sur toute la fenêtre.

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!