Stil mit {stil}

Dez 07

CSS position • Positionieren von Elementen

Im reinen HTML sind Elemente im Fluss des Dokuments positioniert – d.h., sie erscheinen Element für Element in der Reihenfolge, in der sie im HTML-Code beschrieben werden, nacheinander im Browserfenster des Besuchers. Diese einfachste Art der Positionierung wird auch als flow oder statisch bezeichnet.

<div id="spalte1">
<img src="…" … />
<ul> … </ul>
</div>

<div id="spalte2"><p>Lorem ipsum dolor sit amet … </p></div>

<div id="spalte3"><p>Aliquam tempus ipsum … </p></div>

Für HTML liegen alle Elemente im Textfluss und werden in der Reihenfolge dargestellt, in der sie im Quelltext der Seite erscheinen.

Positionierung von Layout-Elementen

Positionierte Elemente erzeugen Boxen, die in einem Verhältnis zum Dokument liegen oder ganz aus dem Textfluss herausgenommen und relativ zu den Grenzen des Browserfensters liegen.

Für die Positionierung von Layout-Elementen einer HTML-Seite wird zumeist das div-Tag als Behälter für die Inhalte herangezogen. Die CSS-Regeln »position: absolute« oder »float: left« bzw. »float: right« sind die meistgebrauchten Mechanismen für die Erzeugung von Layout-Boxen.

Die CSS-Eigenschaft position legt also nicht die Position innerhalb des Browserfensterns oder des Dokuments fest, sondern die Art der Positionierung.

Positionierung mit float

Durch float positionierte Elemente erhalten eine Position im Dokument – sie werden aus dem Textfluss genommen – und verdrängen andere Elemente.

#spalte1 { width: 120px; float: left; margin-right: 10px; }

Ein mit »float: left« oder »float: right« positionierter Block nimmt nur den Platz ein, der durch seine Breite und die Höhe seiner Inhalte festgelegt ist und verdrängt die folgenden Inhalte nur von diesem Platz – nicht aber in voller Breite des umfassenden Blocks.

Ein mit float positioniertes Element braucht also immer eine Breiteangabe durch die CSS-Eigenschaft width.

Absolute Positionierung

Durch »position: absolute« oder »position: fixed« werden positionierte Boxen vollkommen aus dem Textfluss genommen und verdrängen andere Inhalte nicht, sondern legen sich über oder unter andere Elemente.

#spalte1 { position: absolute; width: 120px; }

Damit andere Inhalte nicht überlagert werden, müssen weitere Blöcke einen ausreichend großen Abstand von den Grenzen der umfassenden Box einhalten.

#spalte1 { position: absolute; width: 120px; right: 20px; top: 15px; }
#spalte2 { margin-right: 140px; margin-top: 15px; }
#spalte3 { margin-right: 140px; }

• Die Position von absolut positionierten Blöcken wird durch die CSS-Eigenschaften top, right, bottom und left festgelegt.
• Der Abstand der statischen Blöcke wird durch die CSS-Eigenschaft margin festgelegt.

position

IE4+ M1 N4+ O5+ S1 CSS2 Erblich: Nein

position

ist eine von zwei Eigenschaften, mit denen die physikalische Position eines Elements auf einer Seite gesteuert wird (die andere Eigenschaft ist float).

Werte

absolute | fixed | relative | static | inherit

absolute

positioniert ein Element an einer beliebigen Stelle auf der Seite. Die Position kann eine der Eigenschaften bottom, left, right oder top sein.

fixed

positioniert ein Element an einer beliebigen Stelle des Viewports (Browserfenster). Dort steht das Element fest, auch wenn die Seite im Browserfenster gescrollt wird. fixed wird von Internet Explorer erst ab Version 7 unterstützt!

relative

positioniert ein Element an einer beliebigen Stelle relativ zu seiner Position im normalen Inhaltsfluss der Seite.

static

ist die Vorgabe und stellt ein Element dort dar, wo es im normalen Inhaltsfluss der Seite liegt.