Pourquoi mon dégradé linéaire disparaît-il lorsque j'utilise « position : absolue » sur un élément ?

Angular Freak : Éliminer la disparition du dégradé avec Position:absolute

Pourquoi le dégradé linéaire disparaît-il lorsque je règle un élément sur position:absolute ?

Scénario :

Vous avez créé un arrière-plan dégradé et aspirez à centrer un bloc de texte horizontalement. En quête d'une compatibilité entre résolutions, vous avez positionné l'élément d'en-tête comme absolu, en utilisant une technique d'alignement largement utilisée. Cependant, cette modification a entraîné une disparition inattendue du fond dégradé.

Analyse :

La méthode de positionnement que vous avez appliquée pousse l'en-tête hors du flux normal du document , ce qui entraîne un découpage de son arrière-plan. En effet, la hauteur par défaut de l'élément body est auto, ce qui lui permet de se réduire pour s'adapter à son contenu. En conséquence, aucune partie de l'arrière-plan ne s'étend dans la zone où se situe l'en-tête, le rendant invisible.

Solution :

Pour remédier à ce problème, il faut assurez-vous que l'arrière-plan reste visible malgré le positionnement de l'en-tête. Ceci peut être réalisé en ajustant la propriété min-height de l'élément body pour le forcer à maintenir une hauteur appropriée, s'adaptant à la fois à l'en-tête et à l'arrière-plan.

En définissant min-height : 100vh pour le corps, nous garantir qu'il s'étend au moins sur toute la hauteur de la fenêtre. Cela crée un espace que l'arrière-plan dégradé peut occuper, garantissant sa visibilité tout en conservant l'alignement souhaité de l'en-tête.

Extrait de code :

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

Conclusion :

En modifiant la propriété min-height de l'élément body, nous permettons à l'arrière-plan de rester visible tout en préservant le positionnement souhaité de l'élément header. Cela résout efficacement le problème de la disparition de l'arrière-plan dégradé, nous permettant d'atteindre notre objectif d'un en-tête centralisé avec un arrière-plan dégradé transparent.

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!