2.8.2 Positionsart
en Position
fr Position
- 1 Allgemein
- 2 Absolute Positionierung (position:absolute)
- 3 Fixierte Positionierung (position:fixed)
- 4 Relative Positionierung (position:relative)
- 5 Statische Positionierung (position:static)
⇧ 1 Allgemein
- a) Allgemein
- b) Workshops - Allgemein
- c) Workshop - CSS-Layouts
- d) Feststehende Elemente einer Website
↑ 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
de
position (Positionsart)
de Beispiel
- CSS 4 You de Positionierte Elemente
↑ c) Workshop - CSS-Layouts
- The Styleworks de CSS-Layouts basiert auf Positionierungen
↑ d) Feststehende Elemente einer Website
Webdesign:
Tabellenlose Websites
⇧ 2 Absolute Positionierung (position:absolute)
- a) Begriffe
- b) Startposition von oben (position:absolute; top)
- c) Startposition von rechts (position:absolute; right)
- d) Startposition von unten (position:absolute; bottom)
- e) Startposition von links (position:absolute; left)
↑ a) Begriffe
position:
Die Angabe position: allein legt noch nicht fest, wo genau ein Element beginnen soll.
Es bleibt standardmäßig erst einmal dort, wo es ohne Positionierung auch angezeigt würde.
Die gewünschte abweichende Position müssen Sie zusätzlich angeben.
Dies können Sie beispielsweise mit Angaben für top, left, bottom oder right tun.
absolute:
absolute = absolute Positionierung, gemessen am Rand des nächsthöheren Elternelements, das nicht die Normaleinstellung position:static hat.
Scrollt mit.
↑ b) Startposition von oben (position:absolute; top)
-
SELFHTML
de
top (Startposition von oben)
de Beispiel
-
W3Schools
en
Beispiel: Position:absolute
↑ c) Startposition von rechts (position:absolute; right)
-
SELFHTML
de
right (Startposition von rechts)
de Beispiel
↑ d) Startposition von unten (position:absolute; bottom)
-
ELFHTML
de
bottom (Startposition von unten)
de Beispiel
↑ e) Startposition von links (position:absolute; left)
-
SELFHTML
de
left (Startposition von links)
de 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:
en
Beispiel: Position:relative
⇧ 5 Statische Positionierung (position:static)
static = keine spezielle Positionierung, normaler Elementfluss (Normaleinstellung).
↑