Pourquoi Z-Index ne fonctionne-t-il pas comme prévu avec un positionnement fixe ?

z-index ne fonctionne pas avec un positionnement fixe

Dans la mise en page, z-index détermine l'ordre d'empilement des éléments sur une page Web, avec des valeurs plus élevées apparaissant en haut. Cependant, lorsqu'un élément est positionné de manière fixe, apparemment contre l'intuition, il peut être difficile de le placer derrière un élément positionné statiquement à l'aide du z-index.

Exemple

Considérez le code HTML et CSS suivant :

<div>

#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 le montre l'exemple, malgré la valeur d'index z plus élevée attribuée à #over, l'élément positionné fixe #under reste en haut.

Explication

Le comportement confondant découle des différences inhérentes entre le positionnement statique et fixe.

• Le positionnement statique laisse les éléments non affectés par le z-index, car ils se trouvent dans le flux normal du document.
• Le positionnement fixe, quant à lui, supprime les éléments du flux normal et les positionne par rapport à la fenêtre (l'écran de l'utilisateur).

Dans ce contexte, z- L'index détermine uniquement l'ordre d'empilement des éléments fixes par rapport aux autres éléments fixes. éléments.

Solution

Pour remédier à ce problème, ajoutez position: relative à l'élément positionné statiquement. Cela crée un nouveau contexte d'empilement pour #over, permettant à z-index de déterminer sa position par rapport au contexte nouvellement créé :

#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;
}

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!