http://jendryschik.de / archiv / einfuehrung / positionierung.html

4. Styling von Webseiten

  Abstandsangaben

Positionierung und Ausrichtung von Elementen

Positionsart

Es gibt vier Arten, Elemente zu positionieren:

position:static (statische Positionierung)

Entspricht dem gewöhnlichen Elementfluss, also der Position des Elementes, wenn Sie keine Positionierung vorgenommen haben.

position:relative (relative Positionierung)

Richtet ein Element relativ zu dessen statischer Positionierung aus.

position:absolute (absolute Positionierung)

Richtet ein Element ausgehend von dessen Elternelement aus. Der Block wird dabei aus dem gewöhnlichen Elementfluss herausgenommen.

position:fixed (feste Positionierung)

Entspricht der absoluten Positionierung, jedoch bleibt das Element beim Scrollen stehen.

Die Positionierung eines Elementes würde dann wie folgt aussehen:

<div style="position : absolute; top : 100px; left : 45px;">Inhalt</div>

Allerdings sollte man mit dem Positionieren von Elementen heute noch vorsichtig umgehen, denn die wenigsten Browser interpretieren alle diese Angaben.
Sie erhalten durch die Positionierung sehr schöne Effekte, wenn zum Beispiel zwei <div>-Elemente mit unterschiedlicher Hintergrundfarbe einander überschneiden. Normalerweise überlappen die Elemente sich in der Reihenfolge, in der sie angegeben werden. Also das folgende Element überlappt immer das erste. Mit der zusätzlichen Angabe z-index bestimmen Sie die Reihenfolge der Überlappung: z-index : 1 wird von z-index : 2 überlappt und so weiter.

Höhe und Breite

Wollen Sie sich überschneidende Elemente realisieren, müssen Sie Höhen- und Breitenangaben vornehmen.

height

Damit bestimmen Sie die Höhe eines Elementes. Möglich sind numerische Werte und auto.

width

Damit bestimmen sie die Breite eines Elementes. Sie können numerische Werte, Prozente oder auto angeben.

Textumfluss

Sie können für einen Bereich oder ein Element bestimmen, daß nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.

float

Damit können Sie bestimmen, daß nachfolgende Elemente das aktuelle Element umfließen. Folgende Angaben sind möglich: left, right und none.

clear

Damit könne Sie den Textumfluss wieder aufheben. Dazu gibt es folgende Möglichkeiten: left erzwingt bei float:left die Fortsetzung unterhalb, right erzwingt bei float:right die Fortsetzung unterhalb, both erzwingt in jedem Fall die Fortsetzung unterhalb, none erzwingt keine Fortsetzung unterhalb.

Anzeigeart

Man kann für einzelne Elemente die Anzeigeart festlegen.

display

Folgende Angaben sind möglich: block erzwingt für das Element einen eigenen Absatz, inline erzwingt die Anzeige im Text und unterdrückt somit einen eigenen Absatz und none sorgt dafür, dass das Element nicht angezeigt und auch kein Platzhalter freigelassen wird.

visibility

Mit hidden verstecken Sie ein Element. An dessen Stelle wird ein Leerraum angezeigt. Mit visible wird (bleibt) das Element angezeigt.

  Rahmen