L'empilement et les éléments flottants
Pour les blocs flottants, l'ordre d'empilement est légèrement différent. Les blocs flottants sont disposés entre les blocs non positionnés et les blocs positionnés. Voici l'ordre d'empilement :
- L'arrière-plan et les bordures de l'élément racine du document
- Les blocs qui descendent les uns des autres et qui sont situés dans le flux normal, dans l'ordre dans lequel ils apparaissent (pour HTML) ;
- Les blocs flottants ;
- Les éléments enfants positionnés, dans leur ordre d'apparence (pour HTML).
En fait, comme on le voit avec l'exemple ci-après, l'arrière-plan et la bordure du bloc non positionné (DIV n°4) ne sont pas impactés par les blocs flottants alors que le contenu est affecté. Il s'agit du comportement standard de la propriété CSS float.
Ce comportement peut être expliqué en améliorant la liste précédente :
- L'arrière-plan et les bordures de l'élément racine ;
- Les blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
- Les blocs flottants ;
- Les éléments « en-ligne » enfants dans le flux normal ;
- Les éléments enfants positionnés, dans leur ordre d'apparence (en HTML).
Note : Dans l'exemple qui suit, tous les blocs sont transparents, excepté celui qui n'est pas positionné, montrant ainsi l'ordre d'empilement. Si l'on réduit l'opacité du bloc non positionné (DIV #4), il se produit quelque chose d'étrange : l'arrière-plan et la bordure de cet élément se placent par dessus les blocs flottants, mais restent toujours sous les blocs positionnés. Je n'ai pas été capable de déterminer s'il s'agissait d'un bogue ou d'une interprétation particulière des spécifications CSS (l'application de l'opacité pourrait créer implicitement un contexte d'empilement).
Code source de l'exemple
CSS
div {
font: 12px Arial;
}
span.bold {
font-weight: bold;
}
#absdiv1 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 200px;
top: 10px;
right: 140px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
#normdiv {
/*opacity: 0.7;*/
height: 100px;
border: 1px dashed #999966;
background-color: #ffffcc;
margin: 0px 10px 0px 10px;
text-align: left;
}
#flodiv1 {
opacity: 0.7;
margin: 0px 10px 0px 20px;
float: left;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#flodiv2 {
opacity: 0.7;
margin: 0px 20px 0px 10px;
float: right;
width: 150px;
height: 200px;
border: 1px dashed #009900;
background-color: #ccffcc;
text-align: center;
}
#absdiv2 {
opacity: 0.7;
position: absolute;
width: 150px;
height: 100px;
top: 130px;
left: 100px;
border: 1px dashed #990000;
background-color: #ffdddd;
text-align: center;
}
HTML
<div id="absdiv1"> <br/><span class="bold">DIV #1</span> <br/>position: absolute; </div> <div id="flodiv1"> <br/><span class="bold">DIV #2</span> <br/>float: left; </div> <div id="flodiv2"> <br/><span class="bold">DIV #3</span> <br/>float: right; </div> <br/> <div id="normdiv"> <br/><span class="bold">DIV #4</span> <br/>no positioning </div> <div id="absdiv2"> <br/><span class="bold">DIV #5</span> <br/>position: absolute; </div>