CSS, HTML UND JAVASCRIPT MIT {STIL}

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

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

<div id="spalte2"><p>Lorem … </p></div>

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

Positionierung von Layout-Elementen

Alle HTML-Inhalte 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.

Absolute Positionierung

Durch »position: absolute« oder »position: fixed« werden positionierte Boxen vollkommen aus dem Textfluss genommen. Sie verdrängen aber andere Inhalte nicht, sondern legen sich über oder unter andere Elemente, je nachdem, ob sie im HTML-Quelltext vor oder nach weiteren Elementen stehen.

Wenn für einen Block mit CSS position: absolute keine Breite angegeben wird, hat er eine – sagen wir mal – ziemlich exotischen Eigenheit: Absolut positionierte Elemente werden nur so breit wie ihr Inhalt. Wird also nur ein Wort oder ein Bild in den Block gesetzt, wird der Block nur so breit wie das Wort oder das Bild.

Das Koordinatensystem einer absolut positionierten Box ist das Browserfenster. Wenn keine Position durch top und left angegeben ist, liegt ein absolut positionierter Block im Koordinatensystem des Browserfensters auf Position top: 0 / left: 0.

#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.

CSS position

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 Position des Browserfensters oder eines umfassenden, relativ positionierten Blocks. 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 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.