Pourquoi z-index ne fonctionne-t-il pas avec des éléments de positionnement fixes ?

z-index ne fonctionne pas avec le positionnement fixe : découvrir la raison

Le positionnement fixe est un outil puissant pour créer des éléments qui restent en place sur l'écran quel que soit le défilement. Cependant, cela peut parfois interférer avec la propriété z-index, qui contrôle l'ordre d'empilement des éléments.

Pour illustrer, considérons l'extrait de code suivant :

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

#under {
  position: fixed;
  top: 5px;
  width: 420px;
  left: 20px;
  border: 1px solid;
  height: 10%;
  background: #fff;
  z-index: 1;
}

Comme on peut s'y attendre, l'élément #over doit apparaître au-dessus de l'élément #under car il a un z-index plus élevé. Cependant, dans ce scénario, #under se superpose toujours à #over. Pourquoi cela se produit-il ?

La réponse réside dans le positionnement par défaut de #over. Par défaut, les éléments ont un positionnement statique, ce qui signifie qu'ils occupent leur position naturelle dans le flux documentaire. Les éléments de positionnement fixes, en revanche, sont supprimés du flux normal et placés à des coordonnées spécifiques par rapport à la fenêtre d'affichage de la page.

Dans ce cas, la position fixe de #under le fait sortir du flux normal. , et par conséquent, son z-index n'a plus d'importance pour les éléments à positionnement statique. Pour que #under apparaisse derrière #over, nous devons définir le positionnement de #over sur relatif. Cela placera #over dans le flux de documents mais lui permettra de décaler sa position en fonction de son z-index spécifié.

Voici l'extrait de code corrigé :

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

#under {
  position: fixed;
  top: 14px;
  width: 415px;
  left: 53px;
  border: 1px solid;
  height: 10%;
  background: #f0f;
  z-index: 1;
}

Maintenant, le #under l'élément apparaît sous #over comme prévu. N'oubliez pas que pour que le z-index fonctionne correctement, les éléments doivent être positionnés de manière absolue ou relative.

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!