Redirigé depuis Fr/Comprendre le z-index en CSS:Empilement et float

Empilement et float

Sommaire

1. 1.1. Empilement et propriété float
2. 1.2. Exemple
2. Informations sur le document original

Empilement et propriété `float`

Pour les blocs flottants, l'empilement est légèrement différent. Les blocs flottant sont placés entre les blocs non positionnés et les blocs positionnés :

Arrière-plans et bordures de l'élément racine ;
Blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
Blocs flottants ;
Éléments enfants positionnés, dans leur ordre d'apparence (en HTML).

En réalité, comme on peut le voir dans l'exemple ci-dessous, l'arrière-plan et la bordure du bloc non positionné (DIV #4) ne sont pas affectés par les blocs flottants, alors que le contenu l'est. Il s'agit du comportement standard de la propriété CSS float.

Ce comportement peut être expliqué avec une version améliorée de la suite précédente :

Arrière-plans et bordures de l'élément racine ;
Blocs enfants dans le flux normal, dans leur ordre d'apparence (en HTML) ;
Blocs flottants ;
Éléments « en-ligne » enfants dans le flux normal ;
É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).

Figure 2. Exemple de règles d'empilement avec des blocs flottants

Exemple


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head><style type="text/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;
}

</style></head>

<body>

<br /><br />

<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>

</body></html>

Informations sur le document original

Auteur(s) : Paolo Lombardi
Copyright : This article is the English translation of an article I wrote in Italian for YappY. I grant the right to share all the content under Creative Commons: Attribution-Sharealike license
Dernière Mise à jour : 9 juillet 2005

Récupéré depuis "http://developer.mozilla.org/Fr/Comprendre_le_z-index_en_CSS/Empilement_et_float"