Kapitel 10.2: Positionierung
Absolute Positionierung (position:absolute)
Absolut positionierte Elemente werden aus dem normalen static-Textfluss vollständig herausgenommen. Es sind also Überlappungen möglich. Der Containing Block eines absolut positionierten Elementes darf demnach nicht static sein. Normalerweise wird er mit position:relative, aber ohne Offset-Angaben definiert. Nachfolgende absolut-positionierte Elemente richten sich dann nach diesem initialen Containing Block aus
Wichtig ist auch, dass wenn ein absolut-positioniertes Element deklariert wird (Demo 1), es selbst zum Containing Block für seine Nachkommen wird.
Absolut positionierte Elemente scrollen auf der Seite mit, im Gegensatz zu fixed-positioning.
Plazierung und Grösse absolut positionierter Elementen
Werden nur die Offset-Werte zur Definition des absolut positionierten Elementes benutzt, so wird seine Breite und Höhe von derjenigen des übergeordeten Elementes bestimmt.
Wir zudem eine Breite und/oder Höhe angegeben, so kommt es darauf an, ob es sich um ein ersetztes oder nichtersetztes Element handelt. Sicher können nicht alle Werte berücksichtigt werden, wenn das Kindelement widersprüchlich definiert ist.
Offset-Wert: auto in absolut positionierten Elementen
Wird Offset-left oder -right auf auto gesetzt, so richtet sich das positionierte Kindelement nach der linken/rechten Seite des Elternelementes aus.
Wird offset-top auf 'auto' gesetzt, so verhält sich das Kind-Element so, als wäre es in der Normalflussposition 'static'. Offset-bottom = 'auto' hat keine sichtbare Wirkung. Kommt jedoch width und height dazu, zeigen die auto-Werte eventuell keine Wirkung mehr.
Plazierung und Grösse von nichtersetzten Elementen
Fall 1: In einem absolut positionierten Element werden die Angaben left, right und width auf auto gesetzt:
Das Ergebnis ist in Demo 3 dokumentiert. Auto setzt diese Elemente auf ihre Normalfluss-Position (static).
Fall 2: Nur die linken und rechten Margins des absolut-positionerten Elemente werden auf "auto" gesetzt:
Das Ergebnis ist die horizontal zentrierte Position, die wir schon im normalen Bpx-Design dargestellt haben. Wird jedoch nur eine der auf auto gesetzt, so wird versucht, die Gesamtmasse des Containing Block zu erreichen.
Analog verhält es sich mit der vertikalen Ausrichtung von absolut positionierten Elementen. Hier wird das bottom-element bei "Überdefinition" unbeachtet gelassen.
Vertikale Zentrierung wird von MSIE leider nicht unterstützt.
Placierung und Grösse von ersetzten Elementen
Der eigentlich einzige Unterschied zu den nicht-ersetzten Elementen ist die Tatsache, dass diese Elemente eine eigene Grösse mitbringen und daher hier nicht manipulierbar sind – oder eben doch..
1. Wenn width auf 'auto' gesetz ist, dann gilt die innere width des Elementes, wenn width jedoch einen Wert erhält, dann fügt sich das Bild (oder ersetzte Element dieser Breite.
2. Wenn left auf 'auto' gesetzt wird, so gilt die static-Position. Wenn beide, left und right auf 'auto' gesetzt sind, nehmen beide den Wert 0 an.
3. Die auf 'auto' gesetzten margin-Werte zentrieren das ersetzte Element innerhalb seines containing Blocks.
Für die vertikale Ausrichtung von ersetzten Elementen gelten die genau gleichen Regeln wie bei der horizontalen Ausrichtung, nur eben um 90 Grad gedreht.
Plazierung auf der z-Achse (z-index)
Neben der horizontalen x-Achse und der vertikalen y-Achse besteht die dimensionale z-achse, welche die Sichtbarkeitspriorität der Elemente regelt, die sich überschneiden oder verdecken. Z-index kann eine positive oder negative Zahl sein, die anzeigt, wie weit ein Element vom Betrachter entfernt ist. Grosse Integers sind weiter vorn als kleinere oder negative Zahlen.
Der Stack-Order ist jedoch etwas komplizierter:
Eltern und ihre Kind-Elemente bilden jeweils eine neue Stack-Unterordnung:
Beispiel:
p#one = 10,0 Eltern: das Element 0 der Kinder p#one b = 10,-404 Kind: ganz hinten von Element 10 p#two b = 7,36 Kind: das vorderste der 7 p#two = 7,0 Eltern: das 0 der 7 p#two em = 7,-42 Kind: das hiunterste der 7 p#three b = 1,23 Kind: das vorderste der 1 p#three = 1,0 Eltern: das 0 der 1 Wobei: 10 = vor 7 und vor 1 ist.
Fixierte Positionierung im Sichtbarkeitsbereich (position:fixed)
Das mit position:fixed definierte Element bleibt immer im sichtbaren Fenster. Ansonsten verhält es sich genau gleich wie position:absolute.
Es wäre eigentlich interessant, weil es das Frame-Problem lösen würde, wird aber von MS Internet Explorer nicht unterstützt. Verschiedene Versuche, das Problem mit zusätzlichem JavaScript zu lösen, finden sich bei Peter Paul Koch und auf andern Seiten. Die Ergebnisse sind jedoch nicht unbedingt befriedigend
Relative Positionierung (position:relative)
Bedeutet die relative Verschiebung eines Elementes gegenüber der vererbten Position seines Elternelementes durch die Offset-Angaben. Der vorher eingenommene Raum bleibt jedoch erhalten, was zu unschönen Darstellungen führen kann. Alle Kindelemente eines relativ positionierten Elementes werden ebenfalls verschoben. Es wird ein neuer Containing Block gebildet. Häufigste Verwendung von relativer Positionierung ist die Deklaration ohne jegliche Offset-Angaben, um den Containing Block für die absolute Positionierung zu definieren.
Beispiel: <div style='position:relative'><p style='position:absolute;top: ;etc.></p></div>
Weiter zu Kapitel 11: Tabellenlayout