Comment les éléments de contrôle z-index se chevauchent-ils en CSS ?

Comprendre l'ordre d'empilement du z-index

L'ordre d'empilement détermine l'ordre dans lequel les éléments se chevauchent sur une page Web. La propriété z-index est utilisée pour contrôler l'ordre d'empilement, en attribuant des valeurs plus élevées aux éléments qui doivent apparaître devant les autres.

Comprendre la position et le z-index

z-index s'applique aux éléments positionnés (absolus, relatifs, fixes, collants) et aux éléments flexibles ou en grille avec position : statique.

Contextes d'empilement

Lorsqu'un élément est positionné, un contexte d'empilement est créé, qui limite la portée du z-index à l'élément et à ses descendants.

Ordre d'empilement

Dans l'ordre d'empilement sans z-index, les éléments suivent l'ordre :

1. Arrière-plan et bordures de l'élément racine
2. Bloc non positionné (statique), puis éléments flottants (par ordre d'apparition)
3. Éléments en ligne
4. Éléments positionnés (par ordre d'apparition)

Avec z-index :

1. Arrière-plan et bordures de l'élément racine
2. Éléments positionnés avec z-index < 0
3. Bloc non positionné, puis éléments flottants (par ordre d'apparition)
4. Éléments en ligne
5. Éléments positionnés (par ordre d'apparition)
6. Positionnés éléments avec z-index > 0

Exemples

Divs frères et sœurs mixtes :

• Div1 : position : relative, z- indice : 10;
• Div2 : position : statique;
• Div3 : position : fixe, z-index : 20 ;

Div3 chevauchera Div1 et Div2, tandis que Div1 chevauchera Div2.

Divs imbriqués et mixtes :

• Div1 : position : absolu, z-index : 10;
• Div2 : position : statique ;
• Div3 : position : fixe, z-index : 20;
• Div4 : position : relative, z-index : 15 ;

Div3 chevauchera tous les divs. Div4 chevauchera Div1 et Div2, tandis que Div1 chevauchera Div2.

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!