PROFI-FOTOS-online.com - Der eigene Online-Shop für Profi-Fotografen - Einfach. Günstig. Fair.

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.

CSS-Eigenschaft: top
KurzbeschreibungWerteStandardwertKategorieHinweis
Positionierung von oben
  • <length>
  • <percentage>
  • auto
  • inherit
auto
Allgemein:
Positionierung
CSS 2.1:
Visual formatting model
 

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.
Browserunterstützung von top
Firefox
Firefox
Google Chrome
Google
Chrome
Internet Explorer
Internet
Explorer
Safari
Safari
Opera
Opera
CSS21
Version: 16Version: 25Version: 30Version: 31Version: 32
j
Version: 20Version: 30Version: 35Version: 36Version: 37
j
Version: 8Version: 9Version: 10Version: 11
j
Version: 4Version: 5Version: 6Version: 7
j
Version: 10Version: 11Version: 12
j

Weiterführende Informationen zu top:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    text-wrap


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!

A-Z:

Schnell­auswahl

Seiten:

Letzte Änderung: 17. 01. 2024
Render Time: 0.037 sec.