mozilla
Vos résultats de recherche

    Ajout de z-index

    « CSS « Comprendre z-index en CSS

    Ajout de z-index

    Le premier exemple, Empilement sans z-index, explique le comportement par défaut de l'empilement de couches. Pour définir un ordre d'empilement différent, il est nécessaire d'utiliser la propriété CSS z-index.

    Cette propriété, dont l'attribut est une valeur entière (positive ou négative), représente la position de l'élément le long de l'axe Z. Si vous n'êtes pas familier avec la notion d'axe Z, imaginez-vous que la page possède plusieurs couches, les unes au dessus des autres. Chaque couche est numérotée. Un couche avec une grande valeur de z-index est rendue par dessus toutes celle dont la valeur est inférieure à la sienne.

    • Base : couche la plus lointaine de l'observateur
    • Couche -3
    • Couche -2
    • Couche -1
    • Couche 0 couche de rendu par défaut
    • Couche 1
    • Couche 2
    • Couche 3
    • Sommet : couche la plus proche de l'observateur

    Notes :

    • Lorsque la propriété z-index n'est pas définie, les éléments sont rendus dans la couche 0 par défaut.
    • Si plusieurs éléments possède la même valeur de z-index (c'est-à-dire qu'ils sont placés sur la même couche), alors les règles d'empilement expliquées dans Empilement sans z-index s'appliquent.

    Dans l'exemple suivant, l'empilement des couches a été réordonné en utilisant z-index. Le bloc DIV#5, normalement en dessous, se trouve maintenant au dessus de tous les autres blocs, car il possède la plus grande valeur de z-index.

    Figure 1. Exemple de règles d'empilement modifiées avec la propriété z-index

    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 {
       opacity: 0.7;
       font: 12px Arial;
    }
    
    span.bold { font-weight: bold; }
    
    #normdiv {
       z-index: 8;
       height: 70px;
       border: 1px dashed #999966;
       background-color: #ffffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #reldiv1 {
       z-index: 3;
       height: 100px;
       position: relative;
       top: 30px;
       border: 1px dashed #669966;
       background-color: #ccffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #reldiv2 {
       z-index: 2;
       height: 100px;
       position: relative;
       top: 15px;
       left: 20px;
       border: 1px dashed #669966;
       background-color: #ccffcc;
       margin: 0px 50px 0px 50px;
       text-align: center;
    }
    
    #absdiv1 {
       z-index: 5;
       position: absolute;
       width: 150px;
       height: 350px;
       top: 10px;
       left: 10px;
       border: 1px dashed #990000;
       background-color: #ffdddd;
       text-align: center;
    }
    
    #absdiv2 {
       z-index: 1;
       position: absolute;
       width: 150px;
       height: 350px;
       top: 10px;
       right: 10px;
       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;
       <br />z-index: 5;
    </div>
    
    <div id="reldiv1">
       <br /><span class="bold">DIV #2</span>
       <br />position: relative;
       <br />z-index: 3;
    </div>
    
    <div id="reldiv2">
       <br /><span class="bold">DIV #3</span>
       <br />position: relative;
       <br />z-index: 2;
    </div>
    
    <div id="absdiv2">
       <br /><span class="bold">DIV #4</span>
       <br />position: absolute;
       <br />z-index: 1;
    </div>
    
    <div id="normdiv">
       <br /><span class="bold">DIV #5</span>
       <br />no positioning
       <br />z-index: 8;
    </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: BenoitL, Fredchat, tregagnon, teoli
    Dernière mise à jour par : teoli,