Pourquoi z-index n'affecte-t-il pas les éléments à position fixe ?

Élément à positionnement fixe non affecté par z-index

En CSS, la propriété z-index contrôle l'ordre d'empilement des éléments sur le page, où les valeurs plus élevées déplacent les éléments au premier plan. Cependant, les éléments positionnés fixes semblent parfois insensibles aux modifications de l'index z.

Ce comportement est dû au positionnement statique par défaut des éléments fixes. Lorsqu'un élément avec un positionnement fixe est placé dans un autre élément avec un positionnement par défaut, cela crée un contexte d'empilement au sein de cet élément. Dans ce contexte, l'élément fixe est superposé à tous les autres éléments, quel que soit leur z-index.

Pour résoudre ce problème, vous pouvez ajouter un positionnement relatif à l'élément parent. Cela établit un nouveau contexte d'empilement au sein du parent, permettant au z-index de l'élément fixe de prendre effet.

Exemple :

Considérez le HTML et le CSS suivants :

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

Dans ce cas, l'élément #under restera au-dessus de l'élément #over, même si ce dernier a une valeur supérieure indice z. Pour résoudre ce problème, ajoutez un positionnement relatif à l'élément #over :

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

Maintenant, le z-index de l'élément #under fonctionnera comme prévu, en le plaçant derrière l'élément #over.

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!