La plupart des propriétés CSS sont faciles à utiliser. Souvent, lorsque vous utilisez des propriétés CSS sur des éléments d'un langage de balisage, les résultats apparaissent immédiatement lorsque vous actualisez la page. D'autres propriétés CSS sont plus complexes et ne fonctionneront que dans des circonstances données.
L'attribut Z-index appartient à ce dernier groupe mentionné ci-dessus. Le Z-index provoque sans aucun doute de la confusion (compatibilité) et de la frustration (psychologie des développeurs) plus fréquemment que tout autre attribut. Mais ce qui est amusant, c'est qu'une fois que vous aurez vraiment compris Z-index, vous constaterez qu'il s'agit d'une propriété très facile à utiliser et qu'elle fournira une aide puissante pour résoudre de nombreux problèmes de mise en page.
Dans cet article, nous expliquerons exactement ce qu’est le Z-index, pourquoi il est si mal compris, et discuterons de quelques problèmes pratiques liés à son utilisation. Nous décrirons également certaines des différences d'un navigateur à l'autre que vous rencontrerez, qui sont des problèmes uniques qui existent dans les versions existantes d'IE et de Firefox. Cette perspective complète sur l'attribut Z-index fournira aux développeurs une bonne base de confiance et une aide puissante lors de l'utilisation de l'attribut Z-index.
Qu'est-ce que c'est ça?
L'attribut Z-index détermine le niveau d'empilement d'un élément HTML. Le niveau d'empilement d'un élément est relatif à la position de l'élément sur l'axe Z (par opposition à l'axe X ou à l'axe Y). Une valeur d'indice Z plus élevée signifie que l'élément sera plus proche du haut dans l'ordre d'empilement. Cette séquence de superposition est présentée le long des axes de fil verticaux.
Pour donner une image plus claire du fonctionnement de Z-index, l'image ci-dessus exagère le positionnement visuel des éléments empilés.
séquence de superposition naturelle
Dans une page HTML, l'ordre naturel d'empilement (c'est-à-dire l'ordre des éléments sur l'axe Z) est déterminé par de nombreux facteurs. Ce qui suit est une liste qui affiche les éléments de la liste dans un contexte d'empilement (aucune traduction chinoise appropriée n'a encore été trouvée, elle doit faire référence à l'environnement d'empilement où se trouvent les éléments empilés). Ces éléments se trouvent dans ce contexte d'empilement. de l'environnement. Aucun des éléments de cette liste n'a reçu d'attribut Z-index.
L'arrière-plan et la bordure de l'élément créent un contexte d'empilement
Citation:
·Les éléments de contextes d'empilement avec des valeurs négatives sont classés par ordre d'apparition (plus le niveau est tardif, plus il est élevé)
·Les éléments au niveau du bloc qui ne sont pas positionnés ou flottants sont disposés dans l’ordre d’apparition.
·Les éléments flottants non positionnés sont disposés dans l’ordre d’apparition.
·Les éléments en ligne sont classés par ordre d’apparition.
·Les éléments positionnés sont disposés par ordre d’apparition.
La propriété Z-index, lorsqu'elle est utilisée correctement, modifie l'ordre naturel d'empilement.
Bien entendu, l’ordre d’empilement des éléments n’est pas particulièrement évident à moins qu’ils n’aient été positionnés de manière à se chevaucher. Ci-dessous, une BOÎTE avec des marges négatives est présentée pour illustrer la séquence naturelle d'empilement.
La BOÎTE ci-dessus est définie avec différentes couleurs d'arrière-plan et de bordure, et les deux dernières sont décalées et définissent une marge supérieure négative, afin que nous puissions voir l'ordre naturel d'empilement. La BOÎTE grise est à la première place dans la marque, la BOÎTE bleue est à la deuxième place et la BOÎTE dorée est à la troisième place. Les marges négatives appliquées indiquent clairement le fait que ces éléments n'ont pas de jeu de propriétés d'index Z ; leur ordre d'empilement est naturel, ou la règle composée par défaut. Le phénomène d'entrelacement est provoqué par des marges négatives.