Position und Ausrichtung

Mit Hilfe der folgenden Befehle werden in css die Position von Elementen und deren Rahmen und Ränder definiert. Jedes Element besteht aus der Elementgröße (~ flächenmäßige Ausdehnung) und dem Inhalt (z.B. Text).

Beispiel - CSS Ausrichtung: margin, padding

Elementgröße

Die Elementgröße wird in CSS durch width und height definiert.

Beispiel - Elementbreite – Block-level

width: Längenangabe| Prozentwert | auto

Beispiel - Elementhöhe – Block-level

height: Längenangabe| Prozentwert | auto

Bei width und height kann auch ein minimaler bzw. maximaler Wert definiert werden, so dass man unabhängig von der Schriftgröße, Bildgrößen oder des Inhalts ein Grundlayout definieren kann: min-width, max-width, min-height, max-height

Elementposition

Mit Hilfe von margin (Abstand eines Elementes von einem anderen Element) und padding (Abstand des Inhaltes innerhalb eines Elements von dem Elementrand) kann in CSS die Position eines Elementes festgelegt werden.

Beispiel - Abstand eines Elementes von einem anderen Element

margin: Längenangabe | Prozentwert | auto

Beispiel - Abstand des Inhaltes innerhalb eines Elements von dem Elementrand

padding: Längenangabe | Prozentwert | auto

Bei padding und margin können die Abstände von dem oberen, rechten, unteren und/oder linken Rand definiert werden. Zusätzlich können die Abstände nach oben, rechts, unten und links Über das direkte Ansprechen der Position definiert werden:
padding/margin-top,
padding/margin-right,
padding/margin-bottom,
padding/margin-left
Hierbei sind sowohl positive als auch negative Werte möglich.

Beispiel - Größen- und Positionsdefinition eines Elementes

p {
width: 300px;
margin: 15px 20px 25px 30px;
padding-top: 20pt;
}

Die Werte können auch nur fÜr einzelne Abstände definiert werden, z.B.:

Beispiel - Größen- und Positionsdefinition eines Elementes

p {
margin-top: 15px;
marign-bottom: 25px;
}

Ausgangspunkt bei der Elementpositionierung

Mit Hilfe von position: xxx wird in CSS festgelegt, was den Ausgangspunkt fÜr die Positionierung eines Elementes darstellt.

Wertebereich von position

static: Standardwert, bei dem die Box nach dem gewöhnlichen Fluss ausgerichtet wird.
relative: Das Element wird zu Ihrem Bezugspunkt (vorher stehendes Element) verschoben. Das nachfolgende Element wird so positioniert, als ob dieses Element nicht verschoben wird.
absolute: Das Element wird relativ zu dem umschließenden Element verschoben.
fixed: Das Element wird absolut positioniert und feststehend (d.h. auch beim Scrollen bleibt das Element auf der definierten Position).
Inherit: Die Definition des Elternelements wird Übernommen.

Bei den Positionswerten relative, absolute und fixed kann die Position eines Elementes verändert werden.
Dies erfolgt durch top, right, bottom, left: | <Prozentwert> | static-position | auto |, wobei sich die Prozentangaben auf bei left und right auf die Breite, bei bottom und top auf die Höhe des Elternelements beziehen.
Mit Hilfe von static position behält das Element die Position, an der das Übergeordnete Element ist.