CSS-Eigenschaft: top, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)
Positionierung von oben
Mit top: [Wert] und position: relative|absolute|fixed wird ein HTML-Element von oben aus positioniert.
Kurzbeschreibung | Werte | Standardwert | Kategorie | Hinweis |
---|---|---|---|---|
Positionierung von oben |
| auto |
|
Verwandte Eigenschaften aus der Kategorie: Positionierung (allgemein), Visual formatting model (CSS 2.1):
Folgendes ist beim Einsatz von top zu beachten:
- Alleine eingesetzt hat die Eigenschaft top keine Auswirkung.
- Sie wirkt erst dann, wenn die Eigenschaft position den Wert relative, absolute oder fixed hat. Die Angabe einer position ist folglich Pflichtangabe im Zusammenhang mit top.
- Die Angabe position: static ist die Standardeinstellung der Browser, auch wenn dieser Wert als position explizit gesetzt ist, greift top nicht.
- top ist der Gegenspieler von bottom, es macht also keinen Sinn, beide Werte zu setzen. Anders als beispielsweise in PHP oder JavaScript, wo Fehler mit einer Fehlermeldung mitgeteilt werden, passiert das bei CSS nicht, falls top und bottom gleichzeitig gesetzt sind. Auch der W3C-Validator erkennt diese Angabe nicht als falsch.
- Falls top und bottom dem selben Element zugewiesen werden, greift top, selbst wenn die Angabe von bottom hinter top angegeben ist, ebenfalls nicht, wenn man per !important die Wertigkeit von bottom erhöht.
- Gleiches gilt auch für die Kaskade, wenn ein Eltern-Element eine Einstellung von top hat, wird im Kind-Element die Angabe von bottom ignoriert
- Mögliche Werte sind Angaben in PX, %, EM, etc.
- Der Standardwert ist auto, was 0px von oben bedeutet, wenn top oder bottom nicht gesetzt ist. Darauf sollte man sich jedoch nicht verlassen. Falls eine Angabe für left oder right gemacht wurde, sollte ein top: 0px gesetzt werden, damit man die Position unter Kontrolle hat. Ist das nicht gesetzt, kann das HTML-Element - je nach Browser - schon mal wo anders erscheinen (oder auch gar nicht).
- In den Beispielen wird nebenbei der Unterschied von position: absolute und position: relative deutlich. In den Beispielen mit absoluter Positionierung fällt das blaue Element aus dem Elementfluss raus, die anderen Elementen "rücken" auf. Bei der relativen Positionierung "reserviert" die blaue Box trotzdem ihren Platz, die anderen Elemente bleiben da, wo wie auch wären, wenn die blaue Box nicht positioniert wäre.
Firefox | Chrome | Internet Explorer | Safari | Opera |
|||||||||||||||||||||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
CSS21 |
|
|
|
|
|
Weiterführende Informationen zu top:
- W3C Spezifikation:
http://www.w3.org/TR/CSS21/visuren.html#propdef-top
Beispiele
HTML:
<div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>
CSS:
div {
height: 290px;
border: 1px solid black;
position: relative;
}
/* Damit die Positionierung greifen kann, muss das Eltern-Element selber positioniert sein. Wäre das nicht angegeben, wäre der BODY das Bezugselement. */
div div {
width: 75px;
height: 75px;
float: left;
margin: 5px;
border: 5px solid #c0c0c0;
}
/* Ausgangsbasis für das Beispiel - hiermit wird der Rahmen und die Ausmaße der bunten Boxen definiert. */
div div.doRed {
background-color: red;
}
div div.doBlue {
background-color: blue;
}
div div.doYellow {
background-color: yellow;
}
div div.doGreen {
background-color: green;
}
Beispiel Nr. 1 So sieht's aus:
HTML:
<div class="doAbs">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>
CSS:
div.doAbs div.doBlue {
position: absolute;
top: 50px;
}
/* Per absoluter Positionierung wird die blaue Box von oben des umgebenden DIVs positioniert. Auch wenn nur eine blaue Box zu sehen ist, sind es eigentlich zwei, die sich exakt überlagern, da beide gleich positioniert sind. */
Beispiel Nr. 2 So sieht's aus:
HTML:
<div class="doRel">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>
CSS:
div.doRel div.doBlue {
position: relative;
top: 50px;
}
/* Bei der relativen Positionierung werden die blauen Boxen 50px von oben aus nach unten geschoben, OHNE dass es Einfluss auf den Elementfluss hat. */
Beispiel Nr. 3 So sieht's aus:
HTML:
<div class="doRel doPerc">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>
CSS:
div.doPerc div.doBlue {
top: -20%;
}
/* Prozentuale Angaben sind ebenfalls möglich. Der negative Wert "zieht" die blaue Box oben raus. Ausgangpunkt ist auch hier die linke obere Ecke des Elements selber. Die relative Positionierung ist im Beispiel Nr. 1 gesetzt und greift auch hier. */
Beispiel Nr. 4 So sieht's aus:
HTML:
<div class="doAbs doPerc">
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
<div class="doBlue"></div>
<div class="doYellow"></div>
<div class="doGreen"></div>
<div class="doRed"></div>
</div>
CSS:
div.doAbs.doPerc div.doBlue {
top: 50%;
}
/* Hier eine Prozentangabe in Kombination mit einer absoluten Positionierung. Auch hier überlagern sich die beiden blauen Boxen wieder. */
Beispiel Nr. 5 So sieht's aus:
Fehler melden
Diese Referenz ist ein Freizeitprojekt ohne aufwendiges Lektorat oder Vergleichbarem. Von daher lassen sich bei dem Umfang dieser Referenz trotzt größtmöglicher Sorgfalt Fehler nicht vermeiden.
Hilf, die Qualität dieser Seite zu verbessern! Sollte Dir ein Fehler auffallen, sei es in den Erklärungen, Beispielen oder den Informationen zum Browsersupport, seien es orthographische oder grammatikalische, sende eine kurze E-Mail an info@css-wiki.com. Auch Anregungen und Verbesserungsvorschläge sind jeder Zeit Willkommen. Jede E-Mail wird persönlich beantwortet!
Vielen Dank!