mozilla
Vos résultats de recherche

    Empilement et float

    « CSS « Comprendre z-index en CSS

    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 :

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

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

    Voir aussi

     

    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

    Interwiki Languages Links

    Étiquettes et contributeurs liés au document

    Contributors to this page: teoli, Fredchat, BenoitL, tregagnon, Lapinkiller
    Dernière mise à jour par : teoli,