Wie man in CSS mit Position arbeitet |
|
Donnerstag, 23. Juli 2009
|
||
|
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"> Dieser Quellcode ohne irgendwelche extra Positionsangaben (das entspricht dann position:static) gibt folgendes im Browser aus:  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 { 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:  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 { Jetzt wäre "Ich bin oben" zu lesen. Bei Position:absolute wird fast immer auch mit Positionsangaben gearbeitet. #header, #footer { Das sieht dann so aus:  Ü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"> und folgendes CSS: #website { Das Ergebnis sieht so aus:  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 { Der Rest bleibt identisch. Das Ergebnis sieht dann, so wie wir es wollten aus, nämlich so:  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)
|
||
| Letzte Aktualisierung ( Donnerstag, 23. Juli 2009 ) | ||
| Weiter > |
|---|
