Der eigene Online-Shop für Profi-Fotografen. Für Fotografen, die keine Zeit zu verlieren haben.

CSS-Eigenschaft: position, Kategorien: Positionierung (allgemein), Visual formatting model (CSS 2.1)

Positionierung eines HTML-Elements

Steuert die Position eines HTML-Elements. Auf den ersten Blick scheint diese Eigenschaft mit nur vier möglichen Werten trivial und der Einsatz der einzelnen Werte völlig schlüssig zu sein.

Allerdings sagt der Berufsalltag genau das Gegenteil. Selbst erfahrene Webdesigner lehnen diese Eigenschaft kategorisch ab, ich habe nicht nur einen Style-Guide gesehen, in dem diese Eigenschaft per Anweisung untersagt war.

Das ist ein Hinweis darauf, dass diese Eigenschaft zu den schwierigsten im CSS gehört, hat man allerdings einmal die Funktionsweise verinnerlicht, wird man diese Eigenschaft nicht missen möchten.

CSS-Eigenschaft: position
KurzbeschreibungWerteStandardwertKategorieHinweis
Positionierung eines HTML-Elements
  • static
  • relative
  • absolute
  • fixed
  • inherit
static
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 position zu beachten:

  • Die Eigenschaft position alleine hat keine Auswirkung. Sie gibt lediglich an, dass "an sich" eine Positionierung vorgenommen wird, sagt aber noch nichts über die Art und Weise der Positionierung.
  • position benötigt deswegen IMMER eine oder mehrere Anweisungen, welche die Art der Positionierung bestimmt, entweder die Position von links oder rechts per left oder right und/oder von oben oder unten per top oder bottom.
  • Auch der z-index ist eine Variante der Positionierung. Anders als left, right, top und bottom, welche der zweidimensionalen Positionierung dienen, regelt der z-index die dritte Dimension, das vorne und hinten von HTML-Elementen. Das genaue Verhalten ist unter z-index zu lesen.
  • static ist dabei der Default-Wert und zeigt das normale Verhalten aller HTML-Elemente im Elementfluss. Ganz selten eingesetzt kann er helfen, wenn man eine vererbte (inherit) Positionierung "neutralisieren" muss/will.
  • absolute richtet ohne weitere Angabe von left, right, top oder bottom ein HTML-Element an der linken oberen Ecke eines positionierten Elternelements aus. Wenn kein übergeordnetes Element positioniert wurde ist es das höchste Elternelement, der BODY. Damit ist eine Positionierung von links oben des Browserfensters zu sehen. Wie absolute funktioniert, wird deutlich, wenn man beispielsweise im Inhalt einer Seite ein DIV mit der ID #content hat, die man relative positioniert (das wird dann das übergeordnet positionierte Elternelement), und darin etwas absolut. Die Positionierung findet dann nicht mehr am BODY statt, sondern am DIV #content, was die eigentliche Kraft dieser Eigenschaft ausmacht.
  • relative wird gerne als der relative Abstand zu den anderen HTML-Elementen verstanden, was so nicht stimmt. Die position: relative verschiebt das HTML-Element zu sich selbst. Wenn man einen Überschrift mit 10px mit left konfiguriert (position: relative; left: 10px;), dann schiebt man die Überschrift 10px nach rechts. ABER - es schiebt sich auch am Ende 10px über das folgende Element hinweg, ohne dieses zu verschieben. Dies ist der große Unterschied zu margin oder padding, dort wird immer Platz ins HTML eingefügt, bei position: relative; wird das Element selber nur verschoben, benötigt aber nicht mehr Raum.
  • fixed bestimmt, dass das Element dort stehen bleibt, wohin es positioniert ist. Es ist eine absolute Positionierung am Browserfenster, die auch beim Scrollen nicht bewegt. Es spielt auch keine Rolle, ob ein Elternelement positioniert ist, der Bezugspunkt ist das Browserfenster. Da der IE6 diese Eigenschaft nicht unterstützt, war diese bislang nur mit entsprechendem Workaround einzusetzen. Von daher in der Praxis eher kaum genutzt. Nun, die Ära des IE6 geht langsam zu Ende, fixed kann in Zukunft kreativ genutzt werden.
Browserunterstützung von position
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 position:

  • letzte CSS-Eigenschaft (Acc-Key: ALT + SHIFT + z):
    play-during


Beispiele

HTML:

<div class="doFrame">
   <div id="doAbs">position: absolute; left: 120px; top: 30px;</div>
</div>

CSS:

div.doFrame {
   border: 1px solid #000;
   height: 300px;
   background-image: url('img/gitter.png');
   position: relative;
}
/* Über die position: relative wird der Kasten, der mit dem Gitter hinterlegt ist, als relevantes Elternelement für die absolute Positionierung konfiguriert. */
div.doFrame div {
   border: 2px solid red;
   width: 150px;
   height: 100px;
   background-color: #FFFF9C;
}
/* Diese Angabe dient dem gelben Kasten mit dem roten Rand, der hier für alle Beispiele dient. */
#doAbs {
   position: absolute;
   left: 120px;
   top: 30px;
}
/* Mit position: absolute wird das gelbe DIV absolut im Gitterkasten positioniert. */

Beispiel Nr. 1 So sieht's aus:

position: absolute; left: 120px; top: 30px;
 

HTML:

<div class="doFrame">
   <div id="doAbsBotRe">position: absolute; right: -20px; bottom: 50px;</div>
</div>

CSS:

#doAbsBotRe {
   position: absolute;
   right: -20px;
   bottom: 50px;
}
/* Mit dieser Angabe wird der gelbe Kasten von unten und von rechts positioniert. Der negative Wert für right "zieht" die Box nach rechts raus. */

Beispiel Nr. 2 So sieht's aus:

position: absolute; right: -20px; bottom: 50px;
 

HTML:

<div class="doFrame">
   <div>keine Positionierung</div>
   <div id="doRel">position: relative; top: 50px; left: 50px;</div>
</div>

CSS:

#doRel {
   position: relative;
   top: 50px;
   right: 50px;
}
/* Über relative werden die Elemente im Bezug "zu sich selbst" verschoben. Der Bezugspunkt ist nicht die linke obere Ecke des Gitterkastens, sondern die linke obere Ecke von dem zweiten gelben DIV. */

Beispiel Nr. 3 So sieht's aus:

keine Positionierung
position: relative; top: 50px; left: 50px;
 

HTML:

<div class="doFrame">
   <div id="doStat">position: static; left: 100px; top: 100px;</div>
</div>

CSS:

#doStat {
   position: static;
   left: 100px;
   top: 100px;
}
/* static ist der Default-Wert und "löst" eine Positionierung auf. Die Werte left und top sind hier wirkunkslos. */

Beispiel Nr. 4 So sieht's aus:

position: static; left: 100px; top: 100px;
 

HTML:

<div class="doFrame">
   <div id="doFix">position: fixed; left: 900px; top: 300px;<br>(this is not a bug, this is part of an example...)</div>
</div>

CSS:

#doFix {
   position: fixed;
   left: 900px;
   top: 300px;
}
/* Box weg? Nein, sie muss irgendwo auf der Seite sein, das gelbe DIV ist fix zum Browserfenster positioniert. */

Beispiel Nr. 5 So sieht's aus:

position: fixed; left: 900px; top: 300px;
(this is not a bug, this is part of an example...)
 

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: 01. 04. 2017
Render Time: 6.967 sec.

Browser-Marktanteile