2.6.2 Positionsart (position)

1 Allgemein

a) Allgemein

Mit position: kann die Positionsart bestimmt werden.
Folgende Angaben sind erlaubt:

• absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.
• fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.
• relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.
• static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

b) Workshops - Allgemein

• SELFHTML: position (Positionsart)
  SELFHTML: Beispiel

• CSS 4 You: Positionierte Elemente

c) Workshop - CSS-Layouts

• The Styleworks: CSS-Layouts basiert auf Positionierungen

d) Feststehende Elemente einer Website

⇒ Im Kapitel "Webdesign/Tabellenlose Websites/Feststehende Elemente" ist beschrieben, wie zum Beispiel Kopf- und Fusszeilen an einer bestimmten Stelle fixiert werden können.

2 Absolute Positionierung (position:absolute)

absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat. Scrollt mit.

a) Startposition von oben (position:absolute; top)

• SELFHTML: top (Startposition von oben)
  SELFHTML: Beispiel

• W3Schools: Beispiel: Position:absolute

b) Startposition von rechts (position:absolute; right)

• SELFHTML: right (Startposition von rechts)
  SELFHTML: Beispiel

c) Startposition von unten (position:absolute; bottom)

• SELFHTML: bottom (Startposition von unten)
  SELFHTML: Beispiel

d) Startposition von links (position:absolute; left)

• SELFHTML: left (Startposition von links)
  SELFHTML: Beispiel

3 Fixierte Positionierung (position:fixed)

fixed = absolute Positionierung, gemessen am "Viewport", d.h. am Browserfenster. Bleibt beim Scrollen stehen.

4 Relative Positionierung (position:relative)

relative = relative Positionierung, gemessen an der Normalposition oder Anfangsposition des Elements selbst.

• W3Schools: Beispiel: Position:relative

5 Statische Positionierung (position:static)

static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).

↑