CSS top-Eigenschaft
Die CSS-Eigenschaft top legt die obere Position eines Elements in Kombination mit der position-Eigenschaft fest. Mit Beispielen zum Ausprobieren.
Die CSS-Eigenschaft top legt die vertikale Position eines positionierten Elements fest, gemessen vom oberen Rand eines Referenzrahmens. Allein bewirkt sie nichts — sie hat nur dann eine Wirkung, wenn das Element zusätzlich einen position-Wert hat, der sich vom Standardwert static unterscheidet.
Diese Seite erklärt, wie sich top für jeden position-Wert verhält, welche Einheiten verwendet werden können, häufige Stolperfallen und wie sie mit bottom, left und right zusammenwirkt.
Wie top funktioniert
Der Referenzrahmen, gegen den top gemessen wird — und die Bedeutung des Abstands — hängt von der position des Elements ab:
position: absoluteoderfixed—topversetzt das Element vom oberen Rand seines umgebenden Blocks (beiabsoluteder nächste positionierte Vorfahre; beifixedder viewport). Ein größerertop-Wert schiebt das Element weiter nach unten.position: relative—topverschiebt das Element nach unten von seiner normalen Position, ohne das Layout der umgebenden Elemente zu beeinflussen. Der ursprünglich belegte Platz bleibt erhalten.position: sticky—topist der Abstand vom oberen Rand des Scroll-Containers, bei dem das Element beim Scrollen „klebt". Mittop: 0klebt es ganz oben.position: static—topwird vollständig ignoriert. Dies ist der Standardwert, daher immer zuerstpositionsetzen.
Wenn sowohl top als auch bottom für ein absolut positioniertes Element mit height: auto angegeben sind, wird das Element gestreckt, um beide Werte zu erfüllen; andernfalls hat top Vorrang und bottom wird ignoriert.
Negative Werte sind erlaubt — top: -20px zieht ein absolut oder fest positioniertes Element über seinen Referenzrand und zieht ein relativ positioniertes Element über seine normale Position.
| Anfangswert | auto |
|---|---|
| Gilt für | Positionierte Elemente. |
| Vererbbar | Nein. |
| Animierbar | Ja. |
| Version | CSS2 |
| DOM-Syntax | Object.style.top = "50px"; |
Syntax
Syntax der CSS-Eigenschaft top
top: auto | length | initial | inherit;Beispiel der top-Eigenschaft:
Beispiel der CSS-Eigenschaft top mit Längenwert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 0;
}
.ex2 {
top: 50px;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Ergebnis
Beispiel der top-Eigenschaft mit einem negativen Wert:
Beispiel der CSS-Eigenschaft top mit negativem Wert
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #666;
height: 200px;
position: relative;
}
p {
margin: 0;
color: #fff;
}
.top {
position: absolute;
top: -35px;
color: #000000;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p>Some text.</p>
<p class="top">Text with the top property.</p>
</div>
</body>
</html>Beispiel der top-Eigenschaft definiert in "pt", "%" und "em":
Beispiel der top-Eigenschaft mit den Werten "pt", "%" und "em":
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
div {
background-color: #8ebf42;
height: 200px;
width: 600px;
position: relative;
}
p {
margin: 0;
color: #eee;
position: absolute;
border: 2px solid #666;
}
.ex1 {
top: 5em;
}
.ex2 {
top: 10pt;
}
.ex3 {
top: 75%;
}
</style>
</head>
<body>
<h2>Top property example</h2>
<div>
<p class="ex1">Some text (top: 0;)</p>
<p class="ex2">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
<p class="ex3">
Lorem ipsum is simply dummy text...(this text is positioned 50 pixels down from the top edge of the containing positioned element.)
</p>
</div>
</body>
</html>Werte
| Wert | Beschreibungen | Ausprobieren |
|---|---|---|
| auto | Legt die obere Kantenposition fest. Dies ist der Standardwert dieser Eigenschaft. | Ausprobieren » |
| length | Legt die obere Kantenposition mit px, cm usw. fest. Negative Werte sind zulässig. | Ausprobieren » |
| % | Legt die obere Kantenposition mit % des umgebenden Elements fest. Negative Werte sind zulässig. | Ausprobieren » |
| initial | Setzt die Eigenschaft auf ihren Standardwert zurück. | Ausprobieren » |
| inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Bei Verwendung eines Prozentwerts wird dieser relativ zur Höhe des umgebenden Blocks berechnet, nicht zu seiner Breite. top: 50% bei einem absolut positionierten Element verschiebt es also um die halbe Höhe des übergeordneten Elements nach unten.
Häufige Stolperfallen
positionvergessen.tophat keine Wirkung auf einstatic-Element. Wenn der Abstand scheinbar ignoriert wird, prüfen, obpositionaufrelative,absolute,fixedoderstickygesetzt ist.- Fehlender positionierter Vorfahre. Ein
absolute-Element richtet sich am nächsten positionierten Vorfahren aus. Gibt es keinen, fällt es auf den initialen umgebenden Block zurück (der viewport-große Wurzel). Dem übergeordneten Elementposition: relativegeben, um es einzuschließen. stickyklebt nicht.position: stickyfunktioniert nur, solange das Element innerhalb eines Vorfahren scrollt, der tatsächlich überläuft. Eintop-Wert ohne scrollbaren Container oder ein übergeordnetes Element mitoverflow: hiddenscheint keine Wirkung zu haben.- Sowohl
topals auchbottomverwenden. Bei einem absoluten Element mitauto-Höhe wird es gestreckt; andernfalls hattopVorrang undbottomwird verworfen.
Verwandte Eigenschaften
- position — erforderlich, damit
topwirkt. - bottom, left, right — die anderen Versatz-Eigenschaften, die zusammen mit
topzur Positionierung von Elementen verwendet werden. - z-index — steuert die Stapelreihenfolge, wenn sich positionierte Elemente überlappen.