Propriété CSS bottom

La propriété CSS bottom définit la position inférieure d'un élément en combinaison avec la propriété position.

Remarque : La propriété bottom n'a aucun effet sur les éléments avec position: static (la valeur par défaut).

Selon le positionnement de l'élément, l'effet de la propriété bottom peut varier. Plus précisément :

Lorsque le positionnement d'un élément est relative, absolute, fixed ou sticky, la valeur bottom joue un rôle important.
Lorsque la position est fixed, l'élément est positionné par rapport au viewport de l'écran et reste fixe lors du défilement.
Lorsqu'il est absolute, l'élément est positionné par rapport à son conteneur.
Lorsque la position est relative, cela déplace le bord inférieur de l'élément au-dessus ou en dessous de sa position normale.
Pour sticky, l'élément se comporte comme relative jusqu'à ce qu'un seuil de défilement soit atteint, après quoi il se comporte comme fixed par rapport au viewport.

Valeur initiale	auto
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Héritée	Non.
Animable	Oui. La position bottom peut être animée.
Version	CSS2
Syntaxe DOM	object.style.bottom = "10px";

Syntaxe

Syntaxe de la propriété CSS bottom

css

bottom: auto | length | percentage | initial | inherit;

Exemple de la propriété bottom :

Exemple de la propriété CSS bottom avec la valeur de position absolute

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 300px;
        width: 80%;
        border: 3px solid #8ebf42;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété bottom</h2>
    <div class="parent">
      La position de ce div est définie sur relative.
      <div class="absolute">Le bord inférieur de ce div est placé à 10 pixels au-dessus du bord inférieur de l'élément conteneur, et la position est définie sur absolute.</div>
    </div>
  </body>
</html>

Try it Yourself »

Résultat

CSS bottom property

Exemple de la propriété bottom avec toutes les positions :

Exemple de la propriété CSS bottom avec toutes les positions

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 180px;
        border: 3px solid #8AC007;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 20px;
        border: 3px solid #8AC007;
      }
      div.relative {
        position: relative;
        width: 50%;
        bottom: 2px;
        border: 3px solid #8AC007;
      }
      div.fixed {
        position: fixed;
        width: 50%;
        bottom: 50px;
        border: 3px solid #8AC007;
      }
      div.sticky {
        position: sticky;
        top: 0;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8AC007;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété bottom</h2>
    <div class="parent">
      Cet élément div a position: relative.
      <div class="absolute"><strong>position: absolute et bottom 20px</strong>
        <br />Le bord inférieur de ce div est placé à 20 pixels au-dessus du bord inférieur de l'élément conteneur.</div>
    </div>
    <br />
    <div class="parent">
      Cet élément div a position: relative.
      <div class="relative"><strong>position: relative et bottom 2px</strong>
        <br />Le bord inférieur de ce div est placé à 2 pixels au-dessus de sa position normale.</div>
    </div>
    <br />
    <div class="fixed"><strong>position: fixed et bottom 50px</strong>
      <br />Le bord inférieur de ce div est placé à 50 pixels du bas du viewport.</div>
    <div class="parent">
      Cet élément div a position: relative.
      <div class="sticky"><strong>position: sticky et bottom 10px</strong>
        <br />Cet élément est sticky.</div>
    </div>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester »
auto	C'est la valeur par défaut. Elle permet au navigateur de calculer la position du bord inférieur.	Tester »
percentage	Définit la position de l'élément en pourcentage de la hauteur du bloc conteneur.
length	Définit la position de l'élément en px, cm, etc. Les valeurs négatives sont autorisées.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Que fait la propriété 'bottom' en CSS ?

Elle positionne un élément à partir du bas de son conteneur.Elle fournit un abri aux sans-abri.Elle peut prendre auto comme valeur.Elle contrôle la couleur de la bordure d'un élément.Elle doit être utilisée avec la propriété position pour fonctionner correctement.Elle redimensionne automatiquement les images sur une page web.

Propriété CSS bottom ​

Syntaxe ​

Exemple de la propriété bottom : ​

Résultat ​

Exemple de la propriété bottom avec toutes les positions : ​

Valeurs ​