Parce que nous pensons intuitivement que les pages Web HTML sont bidimensionnelles, car le texte, les images ou d'autres éléments sont disposés dans l'ordre. Cependant, la page Web elle-même est tridimensionnelle et un empilement (chevauchement) peut se produire entre les éléments. via CSS La propriété z-index définit l'ordre d'empilement des éléments.
1. Signification de l'attribut z-index
L'ordre d'empilement d'un élément dans le document, utilisé pour confirmer le niveau d'empilement de l'élément dans le contexte d'empilement actuel. Les éléments avec un ordre d'empilement supérieur apparaîtront toujours devant les éléments avec un ordre d'empilement inférieur.
(1) Plus la valeur de l'attribut z-index est élevée, plus elle est élevée.
(2) Les éléments peuvent avoir des valeurs d'attribut z-index négatives.
(3) z-index et nombres spécifiques.
(4) La valeur du z-index ne suit pas l'unité.
Comme indiqué ci-dessous :
Comme le montre la figure ci-dessus, le nom de cette propriété est dérivé du système de coordonnées, où l'axe des x va de gauche à droite et l'axe des y de haut en bas. De l’écran à l’utilisateur se trouve l’axe z. Dans ce système de coordonnées, les éléments avec une valeur d'indice z plus élevée sont plus proches de l'utilisateur que les éléments avec une valeur d'indice z plus faible, c'est-à-dire que les éléments avec une valeur d'indice z plus élevée sont d'abord affichés dans le champ de vision de l'utilisateur. , ce qui entraîne un élément plus long avec des valeurs d'indice z élevées couvrant d'autres éléments, également appelé empilement ou empilement.
Vous pouvez créer des mises en page Web plus complexes via l'attribut z-index. Les valeurs facultatives de l'attribut z-index sont indiquées dans le tableau suivant :
Il convient de noter les points suivants concernant la relation hiérarchique des éléments :
(1) Pour les éléments dont l'attribut de position n'est pas défini ou lorsque la valeur de l'attribut de position est statique, l'élément défini ultérieurement écrasera l'élément précédent ;
(2) Pour les éléments qui ont un attribut de position défini et dont la valeur d'attribut n'est pas statique, ces éléments écraseront les éléments qui n'ont pas d'attribut de position défini ou dont la valeur d'attribut de position est statique ;
(3) Pour les éléments dont la valeur d'attribut de position n'est pas statique et pour lesquels un attribut z-index est défini, les éléments avec une valeur d'attribut z-index plus grande écraseront les éléments avec une valeur d'attribut z-index plus petite, c'est-à-dire plus le z est grand. -valeur de l'attribut z-index, plus la priorité est élevée, si les valeurs de l'attribut z-index sont les mêmes, les éléments définis ultérieurement écraseront les éléments définis précédemment ;
(4) L'attribut z-index n'est efficace que lorsque l'élément définit l'attribut de position et que la valeur de l'attribut n'est pas statique.
Cas d'application 2.z-index
Exemple:
<!DOCTYPEhtml><html><head><metacharset=utf-8><title>CSSz-index</title><styletype=text/css>div{width:200px;height:200px;text-align:center; taille de police : 50 px ; hauteur de ligne : 200px;position:absolute;}#red{left:100px;top:100px;}#green{left:200px;top:200px;}</style></head><body><!--Z-index en cascade Principes sexuels : 1. Les éléments au même niveau (ou position : statique) écraseront par défaut les éléments précédents dans le flux de documents. (Venant par derrière) 2. Pour les éléments de même niveau, si la position n'est pas statique et que le z-index existe, l'élément avec un z-index plus grand couvrira l'élément avec un z-index plus petit, c'est-à-dire le plus grand. le z-index, plus la priorité est élevée. --><divid=redstyle=background:red;z-index:0;>A</div><divid=greenstyle=background-color:green;>B</div><divid=bluestyle=background-color : bleu;z-index:-1;>C</div></body></html>Résultats en cours d'exécution :
Quelques malentendus sur le z-index
Généralement nous dirons que l'attribut z-index ne fonctionne que lorsqu'il est utilisé avec des éléments positionnés (éléments dont la position n'est pas statique). Tout d'abord, cette affirmation est fausse, car en CSS3, les éléments enfants de la flex box peuvent également être utilisés. . Définissez l'attribut z-index.