Elemente mit CSS gestalten

Das Boxmodell:

position:

Bei der Positionierung von Elementen mit position: 

• muss zuerst festgelegt werden, wonach sich das Element bei seiner Ausrichtung richten soll:

  • position: static ist der Normalzustand. Das Element befindet sich im normalen Dokumentfluss.

  • position: relative ordnet Elemente relativ zu ihrer normalen Position an. Ein Browser berechnet also zunächst die Normalposition und verschiebt das Element anschliessend entsprechend den Angaben top, left, bottom oder right.

  • Absolute Positionierung (position: absolute) ist etwas komplizierter. Elemente mit dieser Positionierungsart ordnen sich relativ zum nächsten Elternelement an, das NICHT die normale Positionierung static hat. Gibt es kein Elternelement, auf das dies zutrifft, richtet sich der Browser nach html selbst. Häufiger ist jedoch der Fall, dass ein Element mit position: relative als Bezugspunkt definiert wird (ohne es über top, left, bottom oder right auch wirklich zu verschieben), sodass sich seine Kindelemente mit position: absolute immer daran ausrichten. Auf diese Weise ist es beispielsweise möglich, einen Button immer in der Ecke oben rechts anzuordnen.

  • Elemente mit Angabe von position: fixed orientieren sich immer am Viewport und bleiben auch beim Scrollen an der angegebenen Position.

  •  position: sticky ist eine Mischform. Ein Element mit dieser Angabe wird so lange im normalen Dokumentfluss positioniert, bis eine definierte Position erreicht ist – von diesem Punkt an ist es fixiert. 

• zudem muss über die Eigenschaften top, left, bottom oder right festgelegt werden, in welche Richtung ein Element verschoben werden soll. Dabei sind alle numerischen Angaben erlaubt, auch negative. Die CSS-Eigenschaft position erlaubt dabei sehr freie Anordnungen von Elementen im Viewport. 

Dokumente: