Pourquoi mon élément à position fixe apparaît-il devant un élément à position statique avec un z-index plus élevé ?

Problème z-index résolu : comprendre le positionnement fixe

Malgré la définition des z-index, il peut parfois être difficile de créer un élément à position fixe apparaître derrière un autre positionné statiquement. Une solution de contournement courante consiste à utiliser un positionnement absolu sur l'élément statique.

Pour approfondir ce comportement, considérons l'exemple suivant :

<div>

#over {
  width: 600px;
  z-index: 10;
}

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  z-index: 1;
}

Comme vous le remarquerez, le fixe L'élément (avec z-index 1) reste devant l'élément statique (avec z-index 10). Cela se produit car par défaut, les éléments positionnés statiques n'ont pas de contexte d'empilement, ce qui signifie qu'ils ne sont pas affectés par le z-index.

Pour résoudre ce problème, vous pouvez définir un contexte d'empilement pour l'élément statique en ajoutant position: relative à celui-ci. . Cela crée une nouvelle couche z-index dans laquelle la propriété z-index fonctionne comme prévu.

#over {
  width: 600px;
  z-index: 10;
  position: relative;
}

Maintenant, l'élément fixe apparaîtra derrière l'élément statique, comme prévu. Cet ajustement simple garantit un comportement correct du z-index, vous permettant de contrôler efficacement la superposition des éléments.

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!