Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété z-index

Description de la propriété z-index.

z-index définit dans quel ordre se superposent les éléments, autrement dit, lequel masque les autres en étant au dessus. La superposition de plusieurs éléments ne peut se produire que lorsque des éléments sont positionnés en absolu, en relatif ou fixés : voir la propriété CSS position.

z-index accepte une valeur numérique sans unité. Plus cette valeur est élevée, plus l'élément est placé au dessus.

La valeur par défaut de z-index est 0. On peut placer un élément derrière tous les autres (y compris le contenu non positionné) en attribuant une valeur négative à z-index.

Lorsque plusieurs éléments ont la même valeur de z-index, ils se positionnent dans l'ordre de leur arrivée : le dernier arrivé au dessus.

Syntaxes pour z-index.

  • z-index: auto;

    Valeur par défaut. L'élément à le même niveau que son parent.

  • z-index: 3;

    L'élément est au dessus des éléments dont le z-index est inférieur à 3. Il est également au dessus des éléments qui ont la même valeur pur z-index et qui sont avant lui dans le code HTML.

    Cette valeur est un nombre sans unité, positif ou négatif. Les valeurs négatives placent l'élément en dessous du contenu non positionné.

  • z-index: initial;

    La valeur initiale est auto.

  • z-index: unset; z-index: inherit;

    Reportez-vous à la description générale de ces valeurs.

Simulateur.

Le simulateur change la valeur de z-index pour le bloc rouge.

z-index :
z-index:1
z-index:2
z-index:3

Voir aussi...

Blocs positionnés - Propriétés.

  • bottom : Définit l'espace entre le bas de l'élément (s'il est positionné) et le bas de son parent.
  • left : Pour un élément positionné, définit l'espace entre le bord gauche de l'élément et le bord gauche de son parent.
  • position : Mode de positionnement.
  • right : Pour un élément positionné, définit l'espace entre le bord droit de l'élément et le bord droit de son parent.
  • top : Pour un élément positionné, définit l'espace entre le haut de l'élément et le haut de son parent.