Über mich

Startseite arrow Tipps & Tricks arrow Wie man in CSS mit Position arbeitet

Wie man in CSS mit Position arbeitet

Donnerstag, 23. Juli 2009
Geschrieben von Armin Vieweg
Ich persönlich versuche die Eigenschaft "position" so selten wie möglich einzusetzen, doch manchmal ist sie echt hilfreich. Wie erfahrt Ihr in diesem Beitrag.

Die Position-Eigenschaft in CSS (Cascading Stylesheet) kann folgende Werte haben:
absolute, relative, static und fixed

"Fixed" wird vom IE6 nicht unterstützt ansonsten sind die verschiedenen Werte unterschiedlich einsetzbar.



Wofür verwendet man Position?
Mit Position sagt man einem Element wie es positioniert wird. Also nicht wo es zu finden sein soll, sondern an was es sich ausrichten soll.

Hat z.B. ein DIV position:relative; orientiert es sich ähnlich wie auch bei static an den Elementen die sich davor oder darüber befinden. Bei position:absolute; jedoch wird es praktisch aus der Struktur genommen und erhält komplett unabhängige Positionsangaben.

Fast immer verwendet man in Verbindung mit Position auch die Befehle "left" und "top" - gelegentlich auch "right" und "bottom".

Um mal mit einem einfachen Beispiel arbeiten zu können ist der folgende HTML-Code für alle Beispiele gleich:

<div id="header">
    Ich bin oben
</div>

<div id="footer">
    Ich bin unten
</div>



Dieser Quellcode ohne irgendwelche extra Positionsangaben (das entspricht dann position:static) gibt folgendes im Browser aus:
Skizze 01: DIV-Schema ohne Position

Natürlich nicht so, hierbei handelt es sich um schematische Darstellungen. Grauen Hintergrund oder dunkelgrauen Rahmen haben wir im CSS nirgends definiert.


Position: relative
Das Bild eben bleibt so, auch wenn wir im CSS folgendes sagen:

#header, #footer {
  position:relative;
}



Relative Positionierung bedeutet, abhängig (also relativ) von anderen Elemente die noch vorhanden sind. Gibt man einem Element keine Position kommt das dem Wert "static" gleich. "Relativ" verhält sich prinzipiell genau so, es gibt jedoch noch einen kleinen Unterschied den ich gleich noch erläutern werden und zwar in Kombination mit "absolute".



Position: absolute
Geben wir beiden Elementen position:absolute; erhalten wir folgendes:
Skizze 2: Zwei DIVs bei position:absolute;

Huch! Wo ist denn das zweite DIV hin? Wir haben doch nichts am HTML geändert?!
Nun beide DIVs orientieren sich am darüber gelegenen Objekt. In diesem Fall den <body>. Da wir keinem irgendwelche Top- oder Left-Angaben mitgegeben haben, befinden sich beide Elemente an der gleichen Position. Left:0 und Top: 0.

Das bedeutet sie befinden sich übereinander. Wir sehen das untere DIV ganz oben, da man sich das vorstellen muss wie mit Zetteln auf einem Tisch: Lege ich den ersten Zettel auf den Tisch und dann einen zweiten darüber, sehe ich oben den zweiten.

Manchmal sind solche Überlagerungen durchaus erwünscht, dann kann man mit der CSS-Eigenschaft z-index bestimmen, welcher höher liegt. Je höher der z-index, desto höher auch die Position des Elements. Höher bezieht sich aber nun auf die Z-Achse, also die Tiefe.

#header, #footer {
  position:absolute;
}
#header {
  z-index:10;
}


Jetzt wäre "Ich bin oben" zu lesen.

Bei Position:absolute wird fast immer auch mit Positionsangaben gearbeitet.

#header, #footer {
  position:absolute;
}

#header {
  top:0; left:0;
}

#footer {
  top:20px; left:10px;
}



Das sieht dann so aus:

Skizze 3: Absolute Positionierung mit konkreten Angaben

Übrigens, ich habe jetzt die DIVs länger gemacht, als sie eigentlich sind. Denn bei position:absolute verliert das DIV das ohne eine definierten Breite ja immer so breit ist wie das umliegende Elemente, jegliche Zuordnung und ist dann nur noch so breit wie sein Inhalt. Es sieht praktisch dann so aus wie display:inline - bleibt aber dennoch block.


Position: fixed
"Fixed" ist wie "absolute", mit dem Unterschied, dass es beim Scrollen weiterhin zu sehen bleibt. Ein Logo mit bottom:0; right:0; und position:fixed ausgerichtet ist immer in der unteren rechten Ecke zu sehen, auch wenn man scrollt. Dieser Wert wird vom Internet Explorer 6 nicht unterstützt.


Die Kombination aus absolute und relative
Jetzt wird es interessant! Wenn ich dem DIV position:absolute gebe und top:10px; left:10px setze, dann kann man sich durchaus die Frage stellen: Von wo denn 10 Pixel?

Die Antwort ist, wenn man nichts anderes definiert hat: Vom Rand der Website. Also von ganz links oben. Ein bottom:10px; würde übrigens nicht das untere Ende des Browsers als Basis nehmen, sondern das untere Ende der Website. Ist die Seite also noch nicht vorbei und man muss herunterscrollen werden die 10 Pixel von dem Ende der Website genommen.

Als Beispiel nehmen wir jetzt mal folgenden HTML-Code:

<div id="website">

    <div id="box1">Box 1</div>
    <div id="box2">Box 2</div>

</div>



und folgendes CSS:

#website {
  width:960px;
  height:500px;
}

#box1, #box2 { position:absolute; }

#box1 {
  top:10px; left:10px;
}

#box2 {
  bottom:10px; right:10px;
}



Das Ergebnis sieht so aus:
Skizze 4: Position:absolute hält sich nicht an Parent

Obwohl sich die beiden Boxen innerhalb von #website befinden werden sie mit position:absolute aus dem Raster gehoben und richten sich nun an den Website-Maßen ganz außen.

Wenn man das umgehen möchte und die Boxen sich innerhalb von Website mit 10 Pixel Abstand zum Rand befinden sollen, ist die Lösung einfach eine Kombination aus dem bisher verwendeten absolute und relative!

Wir ergänzen unser letztes CSS folgendermaßen:

#website {
  width:960px;
  height:500px;
  position:relative;
}
...



Der Rest bleibt identisch. Das Ergebnis sieht dann, so wie wir es wollten aus, nämlich so:
Skizze 5: Position Absolute mit Relative

Die Anwendungsgebiete für diese Technik sind groß. Möchte man zum Beispiel einen Artikel schreiben. Und in der letzten Zeile soll neben dem Text noch ein Drucken-Link folgen können wir das nicht anders lösen (außer garstige Tabellen zu nutzen).

Ein bottom:16px; (wenn die Zeilenhöhe z.B. 16 Pixel ist) würde ohne das "relative" am Ende der Website erscheinen. Gibt man aber dem DIV das um den Artikel liegt ein "position:realtive" und dem Link innerhalb des DIV ein "position:absolute; bottom:16px;" erhält man das gewünschte Ergebnis.

Egal wie lang der Artikel wird (das weiß man ja selten im Voraus) der Link befindet sich immer ganz unten. Diese Technik hat sich bewährt und ist die einzige, mir bekannte Möglichkeit so etwas mit CSS, ohne Tabellen umzusetzen.



Soviel mal zu den Möglichkeiten von Position in CSS. Wenn Ihr noch Ergänzungen, Links oder Fragen habt, nur her damit :)




  Kommentare (5)
 1 Geschrieben von: horachorus, am 15.01.2010 um 18:05
Hey! 
 
Danke für das Tutorial, jetz hab ich das mit position kapiert! Bei SELFHTML ist das Thema leider nicht sehr verständlich beschrieben 
 
lg horachorus
 2 Geschrieben von: firehorse, am 25.03.2010 um 01:11
Zu Stefan seiner selfhtml. 
Einsteiger werden etwas Zeit brauchen und sollten sich besser erstmal mit den Eigenschaften der Elemente auseinandersetzen und diese zueinander vergleichen/zuordnen. So kommt man schneller rein. Denn hier haben Stefan und seine Manne ganze Arbeit geleistet!  
 
Ein sehr gut moderiertes Forum findet ihr unter http://www.xhtmlforum.de/. 
 
Wer ein gutes und wirklich brauchbares "Einsteiger" (weil ohne php im Quellcode) CMS sucht, der sollte mal bei http://www.sefrengo.org/ reinschauen. Läuft unter GPL und ist kostenlos. 
Kleinere bis mittlere Unternehmensauftritte kann man damit erstellen und es verfügt sogar über ein gutes Rechtemangement. Da kann dann auch mal der/die SekretärIN ran. Gutes Forum in deutscher Sprache ist ebenso mit von der Partie. 
 
weitere Tipps zu CSS findet ihr auch unter http://www.andreas-kalt.de/. 
 
gruß 
siehe oben ;)
 3 Geschrieben von: Adrian, am 20.06.2010 um 00:53
Danke, hat mir sehr geholfen.
 4 Geschrieben von: Andrea, am 16.10.2010 um 20:47
Danke, 
 
hilft mir endlich weiter - auch Deine anderen Tuts ;-)
 5 Geschrieben von: P4tR, am 09.12.2010 um 13:53
Dankesehr! 
War sehr hilfreich für die Erstellung meiner Website :)
Letzte Aktualisierung ( Donnerstag, 23. Juli 2009 )
 
Weiter >