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

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

Beispiel

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

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

#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:

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

#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

die Eigenschaft top,
die die Position der Oberkante eines Elements festlegt
die Eigenschaft left,
die die Position der linken Kante eines Elements festlegt
die Eigenschaft right,
die die Position der rechten Kante eines Elements festlegt
das Pseudoelement ::backdrop,
das die Positionierung nach dem ersten Element festlegt
die Eigenschaft caption-side,
die die Position der Tabellenüberschrift festlegt