Pourquoi le z-index ne fonctionne-t-il pas

Le CSS "index z»Détermine l'ordre d'empilement de l'élément HTML. À mesure que sa valeur augmente, il sera placé en avance sur d'autres éléments. Par défaut, chaque élément de la page Web a une position définie statiquement. Cependant, «l'index z» fonctionne uniquement sur les éléments positionnés.

Cette rédaction vous guidera à travers la solution possible au problème de l'index z ne fonctionne pas:

• Définition de la position de l'élément.
• Des éléments avec la même valeur d'indice Z s'accumuleront par ordre d'apparence.
• Définition du niveau d'empilement de l'élément enfant par rapport à son parent.

Préalable: Créez une page HTML

Dans le HTML, faites quatre «»Conteneurs. Tout d'abord, ajoutez une balise «» et attribuez la classe "main-1«À lui. À l'intérieur, ajoutez trois éléments «» «» ayant des cours »sous-main-1","sous-main-2", et "sous-main-3»:

parent
1
2
3

Dans CSS, style les éléments «» pour changer leurs formes.

Classe de style «Main-1»

.Main-1
Largeur: 150px;
hauteur: 150px;
Color d'arrière-plan: bisque;
marge: 50px automatique;
Position: relative;

Ici:

• "largeur»Détermine l'étendue de l'élément.
• "hauteur"Définit la hauteur de l'élément.
• "Couleur de l'arrière plan"Applique la couleur d'arrière-plan de l'élément.
• "marge»Ajoute de l'espace autour de l'élément.
• "position"Avec la valeur"relatif»Place l'élément par rapport à sa position actuelle.

Style «Sub-Main-1»

Le "sous-main-1«La classe est stylée avec les propriétés suivantes pour faire une boîte 1:

.sous-main-1
Largeur: 150px;
hauteur: 150px;
Color en arrière-plan: CadetBlue;
Position: absolue;
En haut: 30px;
Gauche: 20px;

Ici:

• "position"Avec la valeur"absolu"Position l'élément en fonction de son élément positionné parental.
• "haut" et "gauche«Sont utilisés pour ajouter de l'espace en haut de l'élément et à gauche.

Style «Sub-Main-2»

Pour la boîte 2, les styles suivants sont appliqués:

.sous-main-2
Largeur: 150px;
hauteur: 150px;
Color en arrière-plan: RVB (223, 134, 186);
Position: absolue;
En haut: 60px;
Gauche: 50px;

Style «Sub-Main-3»

Les propriétés CSS suivantes sont appliquées pour fabriquer la case 3:

.sous-main-3
Largeur: 150px;
hauteur: 150px;
Color en arrière-plan: RVB (210, 243, 186);
Position: absolue;
En haut: 90px;
Gauche: 80px;

Les quatre boîtes ont été créées avec succès et sont dans l'ordre d'empilement naturel:

Définition de la position de l'élément

La chose importante à considérer est que le «index z»La propriété ne fonctionne qu'avec des éléments positionnés. Ajoutez la propriété «z-index» avec n'importe quelle valeur, comme «1". Donc, si nous supprimons le «position«Propriété du«sous-main-2«Classe, le«index z«La propriété ne fonctionnera pas:

Des éléments avec la même valeur d'indice Z s'accumuleront par ordre d'apparence

Si tous les éléments sont ajustés avec le même "index z«Valeur, ils s'empileront tous dans leur ordre d'apparence. Par conséquent, augmentez la valeur de la propriété «z-index» de l'élément que vous souhaitez afficher devant tous.

Implémentons-le à l'aide d'un exemple:

Parent 1
Enfant 1
enfant 2

Dans CSS, affectez chaque classe avec la propriété «Z-Index» ayant la valeur «1». La page Web ressemblera à ceci:

Définition du niveau d'empilement de l'élément enfant par rapport à son parent

Les enfants de l'élément parent empilent par rapport à son élément parent. Ils n'affecteront pas l'ordre d'empilement de l'autre élément de frère.

Pour une bonne compréhension, analysez l'exemple ci-dessous.

Créer un fichier html

• Tout d'abord, ajoutez un "«Élément pour le parent 1 et attribuez-lui une classe«main-1".
• À l'intérieur, ajoutez des éléments «» pour ses enfants enfants 1, enfant 2 et couche modale.
• À la fin, ajoutez un élément «» pour Parent 2:

Parent 1
Enfant 1
enfant 2


Parent 2

Met le "main-1" classe "index z«Valeur comme«2»:

Z-Index: 2;

Classe «enfant-modal» de style

.enfant-modal
Position: fixe;
En haut: 0px;
gauche: 0px;
Largeur: 100%;
Hauteur: 100VH;
Z-Index: 100;
Color d'arrière-plan: RGBA (0, 0, 0, 0.295);

Le "enfant-modal"Classe"index z«La valeur est définie comme«100», Ce qui signifie qu'il doit être en face de ses éléments de frère.

Met le "index z«Valeur du«sous-main-2" classe "5»:

Z-Index: 5;

Met le "index z«Valeur du«principal" classe "3»:

Z-Index: 3;

Nous pouvons observer à partir de l'image ci-dessous que le frère «principal«De l'élément parent est devant le«main-1"Parent bien que l'un des éléments enfants ait un plus grand"index z" valeur. En effet

Ce sont les raisons pour lesquelles l'index z ne fonctionne pas.

Conclusion

Le "index z«La propriété fonctionne sur les éléments positionnés, comme les éléments ayant«position" propriété "absolu","fixé", ou plus. Si la valeur «Z-Index» de l'élément parent est inférieure à son élément de frères et sœurs et que l'enfant de l'ancien élément parent a une plus grande valeur «Z-Index», l'élément parent de frère. Cet article a discuté de la propriété «z-index» et pourquoi elle ne fonctionne pas.