Pourquoi le positionnement fixe interrompt-il la commande de l'index Z ?

Comprendre le paradoxe du Z-Index avec un positionnement fixe

Lorsque vous traitez des éléments HTML, la propriété z-index contrôle l'ordre d'empilement, déterminant quel élément apparaît au-dessus ou en dessous des autres sur la page. Cependant, un comportement inattendu se produit lors de l'utilisation de z-index avec des éléments positionnés de manière fixe et statique.

Considérez l'extrait de code suivant :

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

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

Vous vous attendez à ce que l'élément avec #over soit affiché derrière #under car il a une valeur d'index z plus élevée. Cependant, l'élément fixe (#under) se superposera obstinément à #over, ignorant sa supposée priorité inférieure.

En effet, le positionnement fixe supprime un élément du flux normal de documents. Il positionne l'élément en fonction de la fenêtre d'affichage, créant essentiellement un calque séparé au-dessus. Par conséquent, le z-index des éléments fixes n'interagit pas avec le z-index des éléments non fixes.

Pour remédier à ce problème et permettre à #over d'apparaître derrière #under, ajoutez position : relative ; to #over :

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

Ce petit ajustement établit un nouveau contexte d'empilement local au sein de #over, permettant à son z-index d'influencer les éléments dans ce contexte. Désormais, #under s'affichera correctement derrière #over, en respectant l'ordre d'empilement prévu.

N'oubliez pas que le positionnement fixe est un outil puissant pour créer un positionnement absolu sur la page, mais il comporte des limites lors de l'interaction avec z-index. dans certains scénarios. En appliquant l'astuce position : relative, vous pouvez reprendre le contrôle de l'ordre d'empilement et obtenir les effets de superposition souhaités.

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!