Eigenschaft bottom

Die Eigenschaft bottom legt die Position der Unterkante eines Elements fest. Werte für die Eigenschaft können mit gebräuchlichen Größeneinheiten angegeben werden, z.B. in Pixeln, Zoll, Punkten, Prozent. Die angegebenen Werte können auch negative Zahlen sein, in diesem Fall überlagern sich die Elemente. Die Koordinatenzählung wird durch die Eigenschaft position bestimmt, die normalerweise den Wert relative (relative Position) oder absolute (absolute Position) annimmt.

Syntax

cssSelektor {
  bottom: Zahl mit Maßeinheit oder auto;
}

Beispiel

Lassen Sie uns beim Überfahren des Kindelements die Position seiner Unterkante auf 25px setzen:

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

Результат:

Beispiel

Und nun soll beim Überfahren die Unterkante des Kindelements bei -50px positioniert sein:

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

Результат:

Siehe auch