mozilla
Vos résultats de recherche

    Comprendre z-index en CSS

    Habituellement, les pages HTML sont considérées comme des objets à deux dimensions, car le texte, les images et tous les autres éléments sont disposés sans recouvrement. Il y a un seul flux de rendu, et tous les éléments connaissent la place occupée par les autres.

     Dans CSS 2.1, chaque boîte a une position dans les 3 dimensions. En plus de leurs positions horizontale et verticale, les boîtes sont disposées sur un « axe z » et sont disposées les unes sur les autres. Les positions sur l'axe Z sont particulièrement importantes lorsque deux boîtes se chevauchent visuellement.

    (de CSS 2.1 Section 9.9.1 - La présentation en couches)

    Cela signifie que les règles de style CSS vous permettent de positionner vos boîtes dans d'autres couches que la seule couche de rendu normale (Couche 0). La position Z de chaque couche est exprimée par un nombre entier qui représente l'ordre d'empilement pour le rendu visuel. Plus cet entier est grand, plus la couche sera haute dans la pile. La position Z peut être contrôlée par la propriété CSS z-index.

    Le z-index semble très simple d'utilisation : une seule propriété, un seul nombre entier et un comportement facile à comprendre. Cependant, lorsque le z-index est appliqué à des hiérarchies complexes d'éléments HTML, son comportement peut vite devenir difficile à appréhender, voire être imprévisible. Ceci est dû aux règles complexes d'empilement. En fait, une section complète a été dédiée dans la spécification CSS CSS-2.1 Appendix E (en) pour mieux expliquer ces règles.

    Cet article à pour objectif d'expliquer ces règles, avec quelques simplifications et de nombreux exemples.

    1. Empilement sans z-index : Règles d'empilement par défaut
    2. Empilement et float : Comportement des éléments flottants
    3. Ajout de z-index : Utiliser le z-index pour modifier l'empilement par défaut
    4. L'empilement de couches : Remarques sur l'empilement de couches
    5. Exemple d'empilement 1 : Hiérarchie HTML à 2 niveaux, z-index sur le dernier niveau
    6. Exemple d'empilement 2 : Hiérarchie HTML à 2 niveaux, z-index sur tous les éléments
    7. Exemple d'empilement 3 : Hiérarchie HTML à 3 niveaux, z-index sur le deuxième niveau

    Note de l'auteur : Merci à Wladimir Palant et Rod Whiteley pour les corrections.

    Informations sur le document original

    • Auteur(s) : Paolo Lombardi
    • Copyright : This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
    • Dernière Mise à jour : 9 juillet 2005

    Interwiki Languages Links

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, Fredchat, BenoitL, tregagnon, Lapinkiller
    Dernière mise à jour par : teoli,