bottom

Exemple interactif

bottom: 0;

bottom: 4em;

bottom: 10%;

bottom: 20px;

<section id="default-example">
  <div class="example-container">
    <div id="example-element">J'ai une position absolue.</div>
    <p>
      Il y a autant de boue dans les rues que si les eaux venaient à peine de se
      retirer de la surface de la terre, et il ne serait pas étonnant de croiser
      un Mégalosaure, long d'une douzaine de mètres, se dandinant comme un
      lézard éléphantesque dans Holborn Hill.
    </p>
  </div>
</section>

.example-container {
  border: 0.75em solid;
  padding: 0.75em;
  text-align: left;
  position: relative;
  width: 100%;
  min-height: 200px;
}

#example-element {
  background-color: #264653;
  border: 4px solid #ffb500;
  color: white;
  position: absolute;
  width: 140px;
  height: 60px;
}

Syntaxe

/* Valeurs de type <length> */
bottom: 3px;
bottom: 2.4em;
bottom: calc(anchor(--my-anchor 50%) + 5px);
bottom: anchor-size(width);

/* <percentage> de la hauteur du bloc englobant */
bottom: 10%;

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

/* Valeurs globales */
bottom: inherit;
bottom: initial;
bottom: revert;
bottom: revert-layer;
bottom: unset;

Valeurs

<length>

Une valeur <length> négative, nulle ou positive :

• pour les éléments positionnés de façon absolue, cela représente la distance jusqu'au bord inférieur du bloc englobant.
• pour les éléments positionnés de façon relative, cela représente la distance avec laquelle l'élément est déplacé au-dessus de sa position normale.
• pour les éléments positionnés par ancre, la fonction anchor() retourne une valeur <length> relative à la position du bord supérieur ou inférieur de l'élément ancre associé (voir Utiliser les propriétés d'encart avec des valeurs de fonction anchor()), et la fonction anchor-size() retourne une valeur <length> relative à la largeur ou à la hauteur de l'élément ancre associé (voir Définir la position d'un élément en fonction de la taille de l'ancre).

<percentage>

Un pourcentage (<percentage>) de la hauteur du bloc englobant.

auto

Définit que :

• pour les éléments positionnés de façon absolue, la position de l'élément est basée sur la propriété top, tandis que height: auto est traitée comme une hauteur basée sur le contenu ; ou si top vaut aussi auto, l'élément est positionné là où il devrait l'être verticalement s'il était un élément statique.
• pour les éléments positionnés de façon relative, la distance de l'élément par rapport à sa position normale est basée sur la propriété top ; ou si top vaut aussi auto, l'élément n'est pas déplacé verticalement.

Description

L'effet de bottom dépend de la façon dont l'élément est positionné (c'est-à-dire la valeur de la propriété position) :

• Lorsque position vaut absolute ou fixed, la propriété bottom définit la distance entre le bord extérieur de la marge inférieure de l'élément et le bord extérieur du remplissage inférieur du bloc englobant, ou, dans le cas des éléments positionnés par ancre lorsque la fonction anchor() est utilisée dans la valeur, par rapport à la position du bord <anchor-side> défini. La propriété bottom est compatible avec les valeurs top, bottom, start, end, self-start, self-end, center et <percentage>.
• Lorsque position vaut relative, la propriété bottom définit la distance avec laquelle le bord inférieur de l'élément est déplacé au-dessus de sa position normale.
• Lorsque position vaut sticky, la propriété bottom est utilisée pour calculer le rectangle de contrainte de collage.
• Lorsque position vaut static, la propriété bottom n'a aucun effet.

Lorsque top et bottom sont tous deux définis, que position vaut absolute ou fixed, et que height n'est pas définie (soit auto soit 100%), les distances top et bottom sont toutes deux prises en compte. Dans toutes les autres situations, si height est contrainte d'une quelconque manière ou si position vaut relative, la propriété top prévaut et la propriété bottom est ignorée.

Définition formelle

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

Positionner en absolu et en fixe

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.

HTML

<p>
  Voici <br />un<br />grand<br />grand,<br />grand,
  <br />grand,<br />grand,<br />grand<br />contenu.
</p>
<div class="fixe"><p>Fixe</p></div>
<div class="absolu"><p>Absolu</p></div>

CSS

p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgb(55 55 55 / 20%);
  border: 1px solid blue;
}

.absolu {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixe {
  position: fixed;
  bottom: 0;
  right: 0;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les propriétés top, left et right
• La propriété raccourcie inset
• Les propriétés inset-block-start, inset-block-end, inset-inline-start et inset-inline-end
• Les propriétés raccourcies inset-block et inset-inline
• La propriété position
• Le module de la mise en page positionnée CSS