Propriété CSS bottom

La propriété CSS bottom spécifie la position basse en combination avec la propriété position.

L'état par défaut des éléments est statique. Dans ce cas, la propriété bottom n'a aucun effet. Mais quand le positionnement d'un élément est "relative", "absolute", "fixed", ou "sticky", la valeur bottom joue un grand rôle. Quand la position est "fixed", l'élément est rélatif au clôture d'écran et reste fixé sur l'écran pendant défilement. Quand c'et "absolute", la position de l'élément sera absolument rélative à son conteneur. Quand la position est "relative", cela fait la côté inférieure de l'élément se déplacer au dessus/au dessous de sa position normale. Dans le cas de position "sticky", la position de l'élément est rélative, quand l'élément est dedans le clôture, et la position est fixée, si il est dehors.

Valeur initiale	auto
Appliquée à	Tous les éléments. Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée	Non.
Animable	Oui. La position basse est animable.
Version	CSS2
Syntaxe DOM	object.style.bottom = "10px";

Syntaxe

bottom: auto | length | initial | inherit;

Exemple

<!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 comme relative.
      <div class="absolute">Le côté inférieure de ce div est placé 10 pixels au-dessus au côté inférieure de l'élément contenant, et la position est définie comme absolute.</div>
    </div>
    </div>
  </body>
</html>

Essayez-vous-même!

Voyons un autre exemple avec tous les positions.

Exemple

<!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;
      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 côté inférieure de ce div est placé 20 pixels au-dessus au côté inférieure de l'élément contenant.</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 côté inférieure de ce div est placé 2 pixels au-dessus à sa position normale.   </div>
    <br>
    <div class="fixed"><strong>position: fixed et bottom 50px</strong><br>Le côté inférieure de ce div est placé 50 pixels du bas du clôture.</div>
    <div class="parent">
      Cet élément div a position: relative.
      <div class="sticky"><strong>position: sticky et bottom 10px</strong><br>Ce div est adhésif.</div>
    </div>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
auto	C'est la valeur initiale. Elle permet le navigateur de calculer la position du côté inférieure.
percentage	Définit la position de l'élément en pourcentages de la hauteur de bloque contenant.
length	Définit la position de l'élément en px, cm, etc. Valeurs négatives sont permises.
initial	Définit la valeur initiale.
inherit	Hérite la propriété de l'élément parent.