Propriété bottom

La propriété bottom définit la position du bord inférieur d'un élément. Les valeurs de cette propriété peuvent être exprimées avec les unités de mesure courantes, par exemple, en pixels, pouces, points, pourcentages. Les valeurs définies peuvent également être des nombres négatifs, dans ce cas, les éléments se superposeront les uns aux autres. Le calcul des coordonnées est déterminé par la propriété position, qui prend généralement la valeur relative (position relative) ou absolute (position absolue).

Syntaxe

csssélecteur {
  bottom: nombre avec unité de mesure ou auto;
}

Exemple

Lors du survol d'un élément enfant, définissons la position de son bord inférieur à 25px :

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: 25px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Exemple

Maintenant, lors du survol, le bord inférieur de l'élément enfant sera positionné à -50px :

html<div id="elem">
  <p></p>
</div>

css#elem {
  width: 400px;
  height: 300px;
  border: 1px solid black;
}
p {
  position: relative;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-top: 50px;
}
p:hover {
  bottom: -50px;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат:

Voir aussi