mozilla
Vos résultats de recherche

    bottom

    Résumé

    La propriété CSS bottom définit une partie de la position des éléments positionnés.

    Pour les éléments en position absolue (c'est-à-dire position: absolute ou position: fixed), elle définit la distance entre la marge du bord inférieur de l'élément et le bord inférieur de son bloc conteneur.

    Pour les éléments en position relative (c'est-à-dire position: relative), elle définit le déplacement de l'élément vers le bas par rapport à sa position normale. Cependant, la propriété top surpasse la propriété bottom, ainsi, si top n'est pas réglée sur auto, la valeur calculée de bottom sera l'opposé de la valeur calculée de top.

    Syntaxe

       bottom: <length> | <percentage> | auto | inherit
    

    Valeurs

    <length>
    Une distance, utilisée comme indiqué dans le résumé. Elle peut être négative, nulle ou positive.
    <percentage>
    Un pourcentage de la hauteur du bloc conteneur, utilisé comme indiqué dans le résumé.
    auto
    Pour les éléments en position absolue, positionne l'élément selon la propriété top et traite height: auto comme une hauteur basée sur le contenu. Pour les éléments en position relative, décale l'élément depuis sa position originale basée sur la propriété top, ou si top est également défini à auto, ne le décale pas du tout.
    inherit
     

    Hérite de la valeur calculée de son élément parent (qui peut ne pas être son bloc conteneur). Cette valeur calculée est alors gérée comme si elle était une <length>, un <percentage>, ou auto

    Exemples

    element { 
        position: absolute;
        bottom: 20px; 
        height: 200px;
        border: 1px solid #000;
    }
    

    L'exemple suivant met en contraste position:absolute et position:fixed. Lorsque le texte régulier devient plus grand que la partie visible de la page Web (la zone d'affichage de la fenêtre du navigateur), les blocs positionnés avec position:absolute défileront avec la page, alors que les blocs positionnés avec position:fixed ne le feront pas. Notez que IE6 ne supporte pas position:fixed.

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title>Position en bas, absolue ou fixe</title>
    <style type="text/css">
    p {font-size:30px; line-height:3em;}
    div.pos {width:49%; text-align:center; border:2px solid #00f;}
    div#abs {position:absolute; bottom:0; left:0;}
    div#fix {position:fixed; bottom:0; right:0;}
    </style>
    </head>
    <body>
      <p>Ceci<br>est<br>un<br>grand,<br>grand,
        <br>grand,<br>grand,<br>grand<br>contenu.</p>
      <div id="fix" class="pos"><p>Fixe</p></div>
      <div id="abs" class="pos"><p>Absolue</p></div>
    </body>
    </html>

    Notes

    Pour les éléments en position absolue dont le bloc conteneur est un élément de type bloc, cette propriété est un décalage par rapport au bord de remplissage (padding) de cet élément.

    Pour les éléments en position absolue, la propriété bottom n'a aucun effet visible lorsque toutes les propriétés top, height et margin-top ne sont pas définies à auto (qui est la valeur par défaut de top et de height).

    Spécifications

    Compatibilité des navigateurs

    This is as far back as the documentaion goes.

    Navigateur Version minimale
    Internet Explorer 5
    Firefox 1
    Netscape 6
    Opera 6

    Voir également

    Position-related CSS properties: position, float, top, right, bottom, left, display, visibility, clear

    Étiquettes et contributeurs liés au document

    Étiquettes : 
    Contributors to this page: teoli, Fredchat, FredB, Mgjbot, Kyodev, Elodouwen
    Dernière mise à jour par : teoli,
    Masquer la barre latérale