Damien Flandrin

Tutoriels, astuces et conseils sur le développement web par un développeur web

La propriété CSS z-index

il y a 4 mois · 1 MIN DE LECTURE
#CSS 

La propriété CSS z-index peut être utilisée en parallèle avec la propriété position pour créer un effet de calques comme Photoshop.

Empiler des éléments dans des calques à l'aide de la propriété z-index

Habituellement, les pages HTML sont considérées comme bidimensionnelles, car le texte, les images et autres éléments sont disposés sur la page sans se chevaucher. Cependant, en plus de leurs positions horizontale et verticale, les boîtes peuvent également être empilées le long de l'axe z, c'est-à-dire l'une sur l'autre en utilisant la propriété CSS z-index. Cette propriété spécifie le niveau de pile d'une boîte dont la valeur de position est absolue, fixe ou relative.

La position de l'axe des z de chaque couche est exprimée sous la forme d'un entier représentant l'ordre d'empilement pour le rendu. Un élément avec un indice z plus grand chevauche un élément avec un élément inférieur.

Une propriété z-index peut vous aider à créer des mises en page plus complexes. L'exemple suivant montre comment créer des calques en CSS.


.box {
    position: absolute;
    z-index: 1;
}

.box2 {
    position: relative;
    z-index: 2;
}

···

Damien Flandrin

Je suis développeur web pour l'agence Carredas, je fais principalement du PHP avec Laravel et Prestashop.
comments powered by Disqus


Développeur Web - Damien Flandrin