Le positionnement en CSS
CHAPITRE 7
113
Comme attendu, le second paragraphe surplombe en partie le premier (ceci indépendamment de l’ordre de leur déclaration dans le code HTML).
Pour le faire passer dessous, il suffit de définir pour chaque boîte un niveau de
z-index différent, en attribuant au premier paragraphe une valeur plus élevée :
p#second {
position: absolute;
top: 40px;
left: 50px;
width: 150px;
background: green;
}
Figure 7–13
Profondeur et
z-index (I)
p#premier {
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 100px;
background: #ccc;
}
p#second {
position: absolute;
top: 40px;
left: 50px;
z-index: 0;
width: 150px;
background: green;
}