Positionieren¶

position¶

Mit der CSS Eigenschaft position kann bestimmt werden, welchen Platz Elemente in einer Website einnehmen und wie sie auf der Website positioniert werden können.

Eigenschaftswert	Erklärung
static	Standardwert – muss nicht angegeben werden. Static bewirkt, dass alle Elemente innerhalb der Website genau in der gleichen Anordnung dargestellt werden, wie sie im HTML geschrieben werden. Der Platz, den das Element benötigt, wird in der Website reserviert.
relative	Durch relative kann ein Element relativ von seiner Position in der Website positioniert werden. Der Platz für das Element wird an der Stelle reserviert, an der sich das Element vorher befand.
absolute	absolute positioniert ein Element absolut vom body-Element aus und nimmt es aus dem Dokumentenfluss heraus. Der Platz wird freigegeben, als wäre das Element nicht in der Seite vorhanden. Besitzt das Elternelement position: relative, wird das absolut positionierte Element relativ zu diesem Elternelement ausgerichtet.
fixed	Ein Element mit position: fixed ist relativ zum Viewport positioniert. Es bleibt immer an derselben Stelle, auch beim Scrollen. Es wird aus dem Dokumentenfluss entfernt und belegt keinen Platz an seiner ursprünglichen Position. Über top, right, bottom, left wird die Position festgelegt.
sticky	Die Position eines sticky-Elementes ist abhängig von der Scrollposition. Es verhält sich zunächst wie relative, bleibt aber ab einem bestimmten Scrollpunkt „kleben“ – vorausgesetzt, das Elternelement besitzt einen „scrolling mechanism“ (overflow: auto/hidden/scroll).

.box {
  position: static;
}

.banner {
  position: relative;
}

.shooter {
  position: absolute;
}

Um ein positioniertes Element zu verschieben, müssen top, right, bottom, left angegeben werden.

CSS Box Modell Seiten

Eigenschaftswert	Erklärung
top	Wie viele Pixel das Element von oben nach unten verschoben wird.
right	Wie viele Pixel das Element von rechts nach links verschoben wird.
bottom	Wie viele Pixel das Element von unten nach oben verschoben wird.
left	Wie viele Pixel das Element von links nach rechts verschoben wird.

Bemerkung

Es empfiehlt sich, immer nur 2 Werte zu setzen – einen für die X-Achse (left oder right) und einen für die Y-Achse (top oder bottom).

.position1 {
  position: relative;
  top: 20px;
  left: 30px;
}

.position2 {
  position: absolute;
  bottom: 0;
  right: 0;
}

Position: static¶

Css Position static

Das Element

befindet sich an der Stelle, an der es im HTML-Dokumentenfluss steht
und nimmt dort seinen Platz vollständig ein.

Position: relative¶

Css Position Relative

Das Element

ist relativ zu seiner eigenen Position verschoben,
wird nicht aus dem Dokumentenfluss genommen (Platz bleibt erhalten),
kann aber andere Elemente überlagern.

div {
  position: relative;
  top: 20px;
  left: 20px;
}

Position: absolute¶

Css Position Absolute

Das Element

ist absolut zum body positioniert,
wird aus dem Dokumentenfluss genommen und kann andere Elemente überlagern,
der Platz wird vollständig freigegeben.

div {
  position: absolute;
  top: 20px;
  left: 20px;
}

Position: absolute in relative¶

Css Position Absolute

Das Element

ist absolut zu seinem relativ positionierten Elternelement ausgerichtet,
top, right, bottom, left beziehen sich auf das Elternelement.

.box1 {
  position: relative;
}

.box2 {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

Position: fixed und sticky¶

position: fixed

Mit position: fixed bleibt ein Element dauerhaft an einer festen Stelle im Browserfenster – egal, wie weit die Seite nach oben oder unten gescrollt wird.

Das bedeutet: Das Element löst sich vollständig aus dem normalen Dokumentfluss und bewegt sich nicht mehr mit den anderen Inhalten.

Die Position wird dabei relativ zum Viewport festgelegt, also zum sichtbaren Bereich des Fensters. Selbst wenn die Seite sehr lang ist, bleibt das Element an seiner festgelegten Stelle stehen.

position: sticky

position: sticky verbindet zwei Verhaltensweisen miteinander: Zunächst verhält sich das Element wie ein normales, statisches Element im Layout. Sobald jedoch ein bestimmter Scroll-Punkt erreicht wird, „klebt“ es an einer vorher definierten Position fest.

Erst wenn der Bereich, zu dem es gehört, zu Ende ist, löst es sich wieder und scrollt normal weiter. Es eignet sich besonders für Überschriften, Menüleisten innerhalb eines Abschnitts oder Inhalte, die nur innerhalb eines bestimmten Bereichs fixiert bleiben sollen.

.fixed-box {
  position: fixed;
  width: 100%;
  height: 100px;
  background-color: crimson;
}

.sticky-box {
  position: sticky;
  width: 100%;
  height: 100px;
  background-color: crimson;
  top: 10px;
}

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Necessitatibus ducimus, id non, eum repellat quasi a enim blanditiis quos consequuntur expedita! Placeat dolorum, quasi quia eaque qui iste veritatis mollitia? Minima, non iure cum amet recusandae numquam, repudiandae voluptate dicta architecto voluptas temporibus ut. Vero incidunt amet beatae id expedita corporis, et delectus. Autem similique a laborum fugiat, optio magnam. Expedita assumenda, alias provident in eveniet doloribus laudantium eaque aliquam quas, rerum, reiciendis facere at. Repellendus molestias nam sint sit magnam assumenda eveniet enim fugit ea omnis nostrum, debitis sequi. Recusandae molestias ad officiis dicta ipsum assumenda ex veritatis? Explicabo sapiente quos nisi velit nihil nulla accusantium, et sed. Laudantium reiciendis ducimus pariatur eligendi facere accusamus qui vero minima libero. Expedita incidunt pariatur facilis dolorum repudiandae doloribus atque earum, aspernatur, iure dolorem unde sint beatae dicta ad. Similique, error vitae iusto voluptas qui sequi expedita dolorum, tenetur nam, incidunt officiis? Quaerat quasi laudantium, eaque quisquam placeat vel neque aliquam est adipisci magnam incidunt unde cupiditate quidem nulla ab voluptate blanditiis eveniet ullam odio repudiandae aspernatur maiores! Quod minima reiciendis mollitia. Adipisci cum eos perspiciatis porro blanditiis saepe sed harum maiores voluptas incidunt repellat neque, sit doloremque ad nulla repellendus nesciunt voluptatum exercitationem architecto ut iusto? Praesentium accusamus odio eum aliquid? Esse voluptatibus magni, fugit atque doloribus facilis soluta veritatis ratione corporis obcaecati sit, beatae tempore omnis! Deleniti, dolor error distinctio inventore dignissimos sed architecto saepe, quibusdam, tempora quisquam laboriosam cumque.