HTML5-Handbuch - die neuen Features von HTML5

Anfangsposition des Elements selbst),
absolute
(absolute Positionierung, gemessen am Rand des nächsthöheren Vorfahrenelements, welches nicht die Normaleinstellung
position:
static;
aufweist),
fixed
(feste Positionierung, gemessen am Viewport, d. h. am Browserfenster) sowie
static
(Default-Wert, Element bleibt im Textfluss).
    Die Angabe
position:
allein legt nur die Positionierungsart fest, aber noch nicht, wo genau ein Element beginnen soll. Die gewünschte Position müssen Sie zusätzlich angeben. Dazu werden üblicherweise die Eigenschaften
top
,
left
,
bottom
und
right
verwendet:
•   
top
bedeutet: Offset-Position von oben, gemessen an der Position, die das Element ohne diese Angabe hätte.
•   
bottom
bedeutet: Offset-Position von unten, gemessen an der Position, die das Element ohne diese Angabe hätte.
•   
left
bedeutet: Offset-Position von links, gemessen an der Position, die das Element ohne diese Angabe hätte.
•   
right
bedeutet: Offset-Position von rechts, gemessen an der Position, die das Element ohne diese Angabe hätte.
    Üblicherweise werden eine oder zwei dieser Angaben notiert, wobei zwei Angaben aus einer horizontalen und einer vertikalen Angabe bestehen, beispielsweise
left:
100px;
oder
top:
50px;
left:
100px;
. Erlaubt ist bei
left
,
top
,
right
und
bottom
eine nummerische Angabe oder das Schlüsselwort
auto
für automatisch berechnete Positionierung.
    Besonders das Verhalten von
position:
absolute;
und
position:
relative;
ist anfangs etwas verwirrend. Denn
absolute
verhält sich durchaus relativ, wie die inneren
div
-Elemente mit
id="a4"
bis
id="a6"
des obigen Beispiels zeigen: relativ nämlich zum Rand des Elternelements (
id="a3"
), vorausgesetzt dieses Element ist mit
absolute
,
fixed
oder
relative
positioniert. Falls kein solches Elternelement existiert, bezieht sich die Positionierung auf das
body
-Element.
    Die Angabe
relative
bezieht sich auf die Normalposition des Elements selbst und verschiebt es entsprechend (Elemente
id="r3"
und
id="r6"
im Beispiel). Der ursprünglich eingenommene Raum bleibt hinsichtlich nachfolgender Elemente – wie die Elemente
id="s4"
und
id="s7"
demonstrieren – erhalten.
    Mit
absolute
oder
fixed
positionierte Elemente werden aus dem normalen Elementfluss entfernt und haben damit keinen Einfluss auf nachfolgende Elemente. Im Beispiel folgt demnach das Element mit
id="s8"
bei der Anzeige direkt auf das mit
id="s7"
, ohne sich an den im Quelltext dazwischen liegenden Elementen
id="a1"
bis
id="a7"
und
id="f1"
zu orientieren.
Weitere Hinweise
    In der Regel werden positionierte Elemente auch mit weiteren CSS-Eigenschaften versehen. Besonders wichtig sind in der Regel Angaben zur Breite, da aus dem Elementfluss herausgelöste Elemente keine »verfügbare Breite« haben, die sie einnehmen können. Sie verhalten sich diesbezüglich eher wie Inline-Elemente, die nur so viel Breite einnehmen, wie es ihr Inhalt erfordert.
    Die Angabe
position:
fixed;
wird vom Internet Explorer für Windows bis Version 6.0 gar nicht und von Version 7.0 nur im standardkonformen Modus unterstützt.
Referenzinformationen
    CSS-Eigenschaften
position
,
    CSS-Eigenschaften
top
,
    CSS-Eigenschaften
left
,
    CSS-Eigenschaften
bottom
,
    CSS-Eigenschaften
right
:

14.12    Floatende Elemente
    Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen. Das klingt zunächst nach einer eher speziellen Funktion, die beispielsweise dazu dienen kann, Text um Grafiken fließen zu lassen. Doch in Ermangelung anderer Techniken und ausgehend von der Kritik an den herkömmlichen Tabellenlayouts ist die Float-Technik gemeinsam mit derjenigen für positionierte Elemente zur Basis für zeitgenössische Webseitenlayouts geworden. Denn sie ermöglicht es, Bereiche flexibel und nebeneinander anzuordnen.
Beispiel