Eigenschaft top

Die Eigenschaft top legt die Position der oberen Kante des Elements vom oberen Rand des übergeordneten Elements fest. Die 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 Koordinatenberechnung wird durch die Eigenschaft position bestimmt, die normalerweise den Wert relative (relative Position) oder absolute (absolute Position) annimmt.

Syntax

Selektor {
	top: Größe oder auto;
}

Beispiel

Lassen Sie uns beim Überfahren des untergeordneten Elements die Position seines oberen Randes 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;
	margin-left: 50px;
}
p:hover {
	top: 25px;
	width: 100px;
	height: 100px;
	border: 1px solid red;
}

Beispiel

Und nun soll beim Überfahren der obere Rand des untergeordneten Elements bei -50px positioniert sein:

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

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

Siehe auch

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