bottom

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La propriété bottom contribue à la définition de l'emplacement vertical des éléments positionnés. Elle n'a aucun effet pour les éléments non-positionnés.

Exemple interactif

Pour les éléments positionnés de façon absolue , c'est-à-dire ceux dont la valeur de la propriété position vaut absolute ou fixed , la propriété bottom définit la distance entre le bord bas de la marge de l'élément et le bord bas du bloc qui contient l'élément.

Pour les éléments positionnés de façon relative, c'est-à-dire ceux dont la valeur de propriété position est relative, la propriété bottom définit la distance dont le bord bas de l'élément est déplacé au-dessus de sa position normale.

Pour les éléments adhérents, c'est-à-dire ceux dont la valeur de la propriété position est sticky

Lorsque les propriétés top et bottom sont définies et que height n'est pas définie ou vaut auto ou 100%, les distances indiquées par top et bottom sont respectées. Dans les autres cas, si height est contrainte, la propriété top prendra le pas sur la propriété bottom qui sera alors ignorée.

Syntaxe

css
/* Valeurs de longueur */
/* Type <length>       */
bottom: 3px;
bottom: 2.4em;

/* Valeurs proportionnelles à la hauteur */
/* du bloc englobant                     */
/* Type <percentages>                    */
bottom: 10%;

/* Valeurs avec un mot-clé */
bottom: auto;

/* Valeurs globales */
bottom: inherit;
bottom: initial;
bottom: unset;

Valeurs

<length>

Une longueur (type <length> qui représente :

  • La distance depuis le bord bas du bloc englobant pour les éléments positionnés de façon absolue
  • Le décalage avec lequel l'élément est déplacé au-dessus de sa position normale dans le flux pour pour les éléments positionnés de façon relative.
<percentage>

Une valeur de pourcentage (type <percentage> exprimée par rapport à la hauteur du bloc englobant.

auto

Indique pour :

  • Les éléments positionnés de façon absolue : la position de l'élément se base sur la propriété top et height: auto est traitée comme une hauteur basée sur la taille du contenu
  • Les éléments positionnés de façon relative : le décalage avec lequel l'élément est déplacé est construit à partir de la propriété top et si celle-ci vaut également auto, l'élément n'est pas déplacé verticalement.
inherit

Cette valeur indique que la valeur est la même que la valeur calculée pour l'élément parent (qui peut ne pas être le bloc englobant). Cette valeur calculée est gérée comme si elle était une longueur, un pourcentage ou le mot-clé auto.

Définition formelle

Valeur initialeauto
Applicabilitééléments positionnés
Héritéenon
Pourcentagesse rapporte à la hauteur du bloc contenant
Valeur calculéesi spécifié par une longueur, la valeur absolue correspondante; si spécifié par un pourcentage, la valeur telle que spécifiée; sinon, auto
Type d'animationune longueur, pourcentage ou calc() ;

Syntaxe formelle

bottom = 
auto |
<length-percentage> |
<anchor()> |
<anchor-size()>

<length-percentage> =
<length> |
<percentage>

<anchor()> =
anchor( <anchor-name>? &&
<anchor-side> , <length-percentage>? )

<anchor-size()> =
anchor-size( [ <anchor-name> || <anchor-size> ]? , <length-percentage>? )

<anchor-name> =
<dashed-ident>

<anchor-side> =
inside |
outside |
top |
left |
right |
bottom |
start |
end |
self-start |
self-end |
<percentage> |
center

<anchor-size> =
width |
height |
block |
inline |
self-block |
self-inline

Exemples

Dans l'exemple qui suit, on illustre la différence de comportement de la propriété bottom lorsque position vaut absolute ou lorsqu'elle vaut fixed. When the regular text becomes taller than the viewable portion of the page (that is, the browser window's viewport), blocks positioned with position:absolute scroll with the page, while blocks positioned with position:fixed don't.

CSS

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

HTML

html
<p>
  Voici <br />un<br />grand<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>Absolu</p>
</div>

Résultat

Spécifications

Specification
CSS Positioned Layout Module Level 3
# insets

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
bottom
anchor()
Experimental
anchor-size()
Experimental
auto

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.

Voir aussi