Skip to main content

Visit Mozilla.org

CSS:bottom

Un article de MDC.

« Référence CSS

[modifier] Résumé

La propriété 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.

[modifier] Syntaxe 

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

[modifier] 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

[modifier] 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>

[modifier] 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).

[modifier] Spécifications

[modifier] Compatibilité des navigateurs

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

[modifier] Voir également

position, top, bottom, left, right

Récupérée de « http://developer.mozilla.org/fr/docs/CSS:bottom »