WebPetit

La propriété CSS z-index permet d’empiler des blocs les uns au dessus des autres, des éléments sur lesquels elle est appliquée.

#mon_identifiant {
position:relative;
z-index:10;
left:10px;
top:-20px;
}

Elle permet de modifier la position d’empilement des blocs.
Elle est obligatoirement utilisé avec la propriété position, et elle est généralement utilisé pour les calques.
Le bloc ayant la plus grande valeur (z-index) est mise au dessus.
La propriété left permet le retrait gauche par rapport au bloc du dessus.
La propriété top permet le retrait du haut par rapport au bloc du dessus.

Exemple :

CSS

#bloc1{
position:relative;
z-index:10;
border :1px solid chocolate;
background-color:chocolate;
width:400px;
left:0px; top:0px;
}

#bloc2{
position:relative;
z-index:1;
border :1px solid #FFCC99;
background-color:#FFCC99;
width:400px;
left:10px; top:-20px;
}

HTML

<div id="bloc1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>

<div id="bloc2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra placerat felis, quis auctor urna lobortis eu. Mauris id nunc ac quam sollicitudin varius. Mauris eget erat vitae purus lacinia egestas. Proin nibh nisl, dictum vitae lacinia quis, consectetur congue elit.
</div>