Verlauf
Alle Kapitel anzeigen
Die Standard-Positionierungsmethode in CSS ist durch die Eigenschaft position: static gegeben; d.h. wenn man nicht explizit eine andere Eigenschaft für position setzt, haben alle Elemente static. Dabei werden alle Elemente in der Reihenfolge angezeigt, in der sie auch im HTML-Code vorkommen - man spricht hierbei auch vom "Document-flow".
Dabei werden alle "block-level"-Elemente (h1, div, p, form, fieldset, ul, ol,...) so dargestellt, dass sie jeweils die ganze Zeile brauchen und danach automatisch immer ein Zeilenumbruch vorgenommen wird. Inline-Elemente werden nebeneinander so dargestellt, dass sie den verfügbaren Platz verwenden und sobald die Zeile zu Ende ist (abhängig von der Bildschirmauflösung/Browserfensterbreite) wird das nächste Element einfach in die nachfolgende Zeile gerutscht. Der vertikale Abstand zwischen Block-Level Elementen wird durch deren margin bestimmt, wobei diese nicht aufaddiert werden sondern auf den größten margin "zusammenklappen" (margin collapsing). Treffen z.B. ein Paragraph mit einem Margin von 8 Pixel und ein weiterer mit einem Margin von 4 Pixel aufeinander, wird der vertikale Abstand zwischen den beiden Elementen 8 Pixel betragen.
Im Beispiel wurden noch zusätzlich zum besseren Erkennen die Schriftart und -größe sowie Rahmen und Füllfarbe der Elemente gesetzt.
Relatives Positionieren ermöglicht es, Objekte relativ zu ihrem "normalen" Auftreten innerhalb des Document Flows zu verschieben. Solange man nur die position:relative setzt, verhält sich das Element genauso wie es dies auch bei static täte; jedoch kann man einen oder mehrere Werte zum Verschieben mit left, top, right oder bottom setzen und um genau diese Werte wird das entsprechende Objekt dann verschoben. Ein gleichzeitiges Setzen von z.B. left und top ist möglich, left und right würde keinen Sinn machen.
Die übrigen Elemente verhalten sich so, als wenn das relativ positionierte Element noch an seinem Platz wäre, d.h rücken weder nach noch wird der entstehende Freiraum irgendwie genützt. Weiter können durch relatives Positionieren Überlappungen auftreten; In welcher Reihenfolge Objekte andere überlappen kann durch die Eigenschaft z-index geregelt werden: Je höher der z-index, desto weiter "vorne" wird ein Objekt angezeigt und desto geringer die Chance, das es von einem anderen Objekt überlappt wird.
Ein absolut positioniertes Element wird aus dem normalen Document Flow herausgenommen; d.h. alle anderen Elemente verhalten sich so, als ob dieses Objekt nicht mehr vorhanden wäre und "rutschen nach" bzw. verwenden den frei gewordenen Platz. Das Objekt selber wird jetzt aber natürlich trotzdem angezeigt, und zwar relativ zum nächsten übergeordneten Element, das nicht position:static ist (wie oben beschrieben sind alle Objekte, die nicht anders beschrieben sind, static!).
D.h. sobald man jetzt bei einem absolut positionierten Element top, left, right oder bottom setzt, wird das hierarchisch nächste übergeordnete nicht-static Element gesucht und dann von diesem Element aus um den entsprechende Offset-Wert veschoben. Falls es kein solches übergeordnetes Element gibt, so ist dies das html-Element (Browserfenster) selber.
Auch hier können Überlappungen auftreten, wiederum steuert hier die Eigenschaft z-index die Reihenfolge.
In der Graphik wird der zweite div absolut positioniert und zwar mit einem Offset von links und oben, d.h. er wird nach unten und nach rechts verschoben und zwar von der linken oberen Ecke des übergeordneten Elternelementes. Ein Angeben von right und bottom würde den div von der unteren rechten Ecke des Elternelementes aus gesehen nach links und nach oben verschieben.
Setzt man für ein Element die position:fixed, so wird dieses Element auch aus dem normalen Document Flow herausgenommen und nicht mehr in Bezug auf den Inhalt der Seite oder irgendwelche Elemente auf dieser Seite positioniert, sondern in Bezug auf das Ausgabemedium.
D.h. dass es immer anderselben Stelle des z.B. Bildschirms positioniert ist und nicht durch Scrollen auf einer Seite verschoben werden kann; ähnlich wird dieses Element auf einem Ausdruck der Seite immer wieder auf derselben Position auf der Papierseite mitausgedruckt (und zwar auf jeder einzelnen Seite).
Diese Eigenschaft würde sich sehr gut für mitscrollende Navigationsbereiche eignen oder um das Erscheinungsbild von Framesets nachzustellen, nur wird es leider von den Webbrowsern momentan nicht zufriedenstellend unterstützt, weswegen man diese Funktionalität eher versucht mit Javascript nachzubilden um ein Funktionieren in allen Browsern zu garantieren (Besonders IE unter Mac hatte gravierende Probleme mit position:fixed, IE unter Windows bietet bis vor Version 7 gar keine Unterstützung). Bis alle gängigen Browser diese Eigenschaft zur Gänze unterstützen, ist von einem Einsatz eher abzuraten.
Beispiel für position:fixed (nach unten scrollen, um den Effekt zu sehen)
Wenn man einem bestimmten Element die Eigenschaft float:left oder float:right gibt, so wird dieses erstmals aus dem Document Flow herausgenommen und nach links bzw. nach rechts "verschoben" bis es am Rand des nächstübergeordneten Elementes "ansteht".
Im linken Bild gibt es ein allgemeines div-Element, das grau eingefärbt ist und darin 3 untergeordnete div-Elemente, die jeweils eine fixe Breite, Höhe und eine unterschiedliche Farbe gesetzt haben. Gemäß des Document-Flows wird jedes dieser div-Elemente (da divs Block-Level Elemente sind) in jeweils einer Zeile untereinander dargestellt.
Versieht man davon den ersten div mit der Eigenschaft float:right (dargestellt im rechten Bild), so wird dieser aus dem Document Flow genommen (div2 und div3 rutschen nach oben nach) und der gefloatete div rutscht nach rechts, bis er am grauen übergeordneten container-div ansteht.
Wenn man nun den zweiten div auch nach rechts floated (ihm auch float:right zuordnet), dann rutscht der dritte div ganz nach oben und der zweite div wird nach rechts verschoben bis er - nun nicht am übergeordneten div, sondern am vorherigen nach rechts gefloateten Element ansteht:
div1 und div2 nach rechts gefloated
D.h. man kann soviele Elemente nebeneinander floaten als Platz auf dem Bildschirm ist. Sobald nicht mehr alle gefloateten Elemente in eine Reihe passen, wird einfach eine nächste Reihe begonnen. Etwas im ersten Moment unerwartetes passiert, sobald man im Beispiel auch das dritte div-Element floated: nachdem es das letzte im Document Flow verbliebene Element im grauen div ist, und es mit dem Setzen eines floats auch aus diesem Flow herausgenommen wird, ist der graue div nunmehr lehr - und klappt zusammen (er "collapsed"). Im Beispiel sieht man ihn nur noch, weil er einen Rahmen und eine Hintergrundfarbe gesetzt hat. Diesem Umstand muss man bei CSS-basierten Layouts noch mehr Aufmerksamkeit zollen
Eine weitere gewöhnungsbedürftige Eigenschaft von Floats sei hier noch erwähnt: Gefloatete Elemente werden zwar aus dem Document Flow herausgenommen (d.h. allgemein gesagt rutschen die anderen Elemente an den verbleibenden Platz), aber mit einer Ausnahme: Text wird von gefloateten Boxen "verdrängt" - und kann somit nicht von den gefloateten Elementen überlagert werden.
ein links gefloatetes div-Element "verdrängt" Text
Möchte man, dass ein Element auf jeden Fall nach einem anderen gefloateten Elemente dargestellt wird (unabhängig davon, ob hinter dem gefloateten Element noch Platz ist, kann man das erreichen, indem man diesem Element die Eigenschaft clear setzt: entweder clear:left, um nach einem links gefloateten Element, clear:right um nach einem rechts gefloateten Element und clear:both, um nach links UND rechts gefloateten Elementen dargestellt zu werden. Zum besseren Verständnis je 1 Beispiel:
Link gefloatetes div, zweiter div cleared nicht
Links gefloatetes div & rechts gefloatetes div, dritter div clear:left
Links gefloatetes div & rechts gefloatetes div, dritter div clear:both
