BlogCSS Positioning

CSS Positioning

static, relative, fixed, absolute, sticky

Topics:

    HTML

    CSS

Read Time: 11 min

Published: 2020-07-02

Mit dem CSS-Property position kann eine positioning-Methode für ein HTML-Element definiert werden.

Folgende Werte sind für position möglich:

  • static
  • relative
  • absolute
  • fixed
  • sticky

Diese können zusammen mit den CSS-Properties top, right, bottom und left benutzt werden um HTML Elemente entsprechend zu positionieren.
top, right, bottom und left nenne ich der Einfachheit halber ab jetzt "Richtungs-Properties". Wie genau diese funktionieren wird später erklärt.

Als Ausgangspunkt benutzen wir ein einfaches HTML-File mit ein wenig Lorem Ipsum-Text:

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="container">
      <p class="text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. <span id="position-me">Duis</span> aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
        qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
  </body>
</html>

CSS

.container {
  padding: 100px;
}

#position-me {
  background-color: red;
}

Die Auswirkungen von position werden wir uns an dem Wort Duis ansehen, deshalb habe ich es in einen <span>-Tag mit der ID position-me gesetzt.
Öffnet man das HTML-File im Browser sieht das so aus:

Static

Alle HTML-Elemente in unserem Beispiel haben jetzt position: static, weil das der Standard-Wert für alle HTML-Elemente ist. Wird also kein anderer Wert definiert, dann gilt dieser. (Jedes CSS-Property hat einen Standard-Wert)
Die Richtungs-Properties top, right, bottom, left haben den Standard-Wert auto.

Ist ein HTML-Element als position: static definiert, haben die Richtungs-Properties keinen Einfluss auf dieses. Es ist somit egal was wir für top, right, bottom, left definieren, das HTML-Element bleibt unverändert im natürlichen Fluss des HTML-Dokuments.

Relative

Setzt man position: relative, kann das HTML-Element relativ zu seiner Ursprungs-Position betrachtet verschoben werden.

CSS

.container {
  padding: 100px;
}

#position-me {
  background-color: red;
  position: relative;
  top: 90px;
  right: 60px;
}

Das Parent-Element (In unserem Fall <div class="container">) respektiert dabei die alte Position des Elements. Es bleibt somit ein Loch frei.
Mit den Richtungs-Properties können wir jetzt definieren, wie weit das HTML-Element im Verhältnis zu seiner alten Position verschoben werden soll. In unserem Fall top: 90px, also von oben herab 90 Pixel und right: 60px, also von rechts 60 Pixel.

Hat ein HTML-Element ein definiertes CSS-Property position(Also einen anderen Wert als position: static), so wird es gegenüber anderen Elementen im Z-Stack oben auf liegen. Was der Z-Stack genau ist wird weiter unten erklärt.

Absolute

Setzt man ein HTML-Element auf position: absolute, so wird dieses aus dem natürlichen Fluss der DOM herausgezogen. Die anderen HTML-Elemente reagieren, als ob das HTML-Element mit position: absolute nicht vorhanden wäre.

CSS

.container {
  padding: 100px;
}

#position-me {
  background-color: red;
  position: absolute;
  top: 90px;
  right: 60px;
}

Unser Wort Duis ist nicht mehr auf seiner alten Position. Die Wörter consequat. und aute sind zusammen gerutscht, so als ob es Duis garnicht geben würde.

Werden für ein HTML-Element mit position: absolute die Richtungs-Properties definiert, so gelten diese bezogen auf das nächste Parent-Element mit einer definierten position (Also einen anderen Wert als position: static). Hat, wie in unserem Fall, kein Parent-Element eine definierte position wird das HTML-Element im Verhältnis zum gesamten Dokument platziert.
In unserem Fall wieder 90 Pixel von oben und 60 Pixel von rechts.

Definiert man bei position: absolute 2 gegensätzliche Richtungs-Properties, also z.B. right UND left, so wird das HTML-Element beide Parameter dadurch erfüllen, dass es sich streckt:

CSS

.container {
  padding: 100px;
}

#position-me {
  background-color: red;
  position: absolute;
  top: 90px;
  left: 60px;
  right: 60px;
}

Das Selbe funktioniert natürlich auch wenn man gleichzeitig top und bottom definiert.

Wie auch schon bei position: relative liegt auch bei position: absolute das HTML-Element im Z-Stack oben auf.

Fixed

Genau wie auch schon bei position: absolute zieht auch position: fixed das HTML-Element aus dem natürlichen Fluss der DOM, wodurch die anderen HTML-Elemente sich verhalten als wäre es nicht vorhanden.

Auch bei position: fixed liegt das HTML-Element im Z-Stack oben auf.

Ein HTML-Element mit position: fixed ignoriert seine Parent-HTML-Elemente immer vollständig. Es wird immer relativ zur Position des Browser-Fensters positioniert.

CSS

.container {
   padding: 100px;
   height: 3000px;
}

#position-me {
   background-color: red;
   position: fixed;
   top: 90px;
   right: 60px;
}

Auf den ersten Blick sieht position: fixed genauso aus wie position: absolute.
Die Positionierung erfolgt jedoch relativ zum Browser-Fenster(Viewport) und nicht zu einem Parent-HTML-Element. Der Unterschied zeigt sich, sobald man beginnt in dem Dokument zu scrollen. Dafür setzten wir height: 3000px für .container um das Dokument länger als das Browser-Fenster zu machen. Das HTML-Element mit position: fixed bleibt in seiner Position "fixiert":

position: fixed ist somit z.B. geeignet für einen fixierten Header oder ein schwebendes Menü wie z.B. einen Einkaufswagen.

Wie auch bei position: absolute kann das Element gestreckt werden, wenn man 2 gegensätzliche Richtungs-Properties definiert.

Sticky

position: sticky kann man sich als eine Mischung aus position: relative und position: fixed vorstellen. Dabei wird das HTML-Element solange relative positioniert, bis der User zu der Position scollt an der das HTML-Element den Bildschirm verlassen würde und wird dann fixed.
Dadurch kann man erzwingen, dass das HTML-Element im Viewport sichtbar bleibt:

CSS

.container {
   padding: 100px;
   height: 3000px;
}

.text {
   height: 100%;
}

#position-me {
   background-color: red;
   position: -webkit-sticky; /* Safari */
   position: sticky;
   top: 0;
}

Damit position: sticky auf dem Safari-Webbrowser funktioniert brauchen wir das -webkit- Prefix.

Damit position: sticky funktioniert muss außerdem mindestens ein Richtungs-Property definiert werden. In unserem Fall top.

Auch bei position: sticky liegt das HTML-Element im Z-Stack oben auf.

Z-Index

Mit z-index kann definiert werden, in welcher Reihenfolge HTML-Elemente übereinander liegen. Ein HTML-Element mit einem höheren z-index liegt über einem HTML-Element mit einem niedrigeren z-index.

z-index wirkt nur auf HTML-Elemente mit einer definierten position, also alle position-Werte außer static. HTML-Elemente mit einer definierten position liegen immer über welchen mit position: static.

Ist kein z-index definiert liegt das Element oben auf, welches in der DOM als letzeres steht.

Um z-index zu verstehen betrachten wir folgendes, neues, Beispiel:

HTML

<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" type="text/css" href="style.css" />
   </head>
   <body>
      <div class="container">
         <div class="red"></div>
         <div class="blue"></div>
      </div>
   </body>
</html>

CSS

.container {
   background-color: lightgoldenrodyellow;
   padding: 100px;
}

.red {
   background-color: red;
   height: 100px;
   width: 100px;
   position: absolute;
}

.blue {
   background-color: blue;
   height: 200px;
   width: 200px;
   margin-left: 40px;
   margin-top: 40px;
}

Das <div class="red"> steht in der DOM nach dem <div class="blue">, trotzdem liegt red oben auf, weil es ein definiertes position: absolute hat.

Definieren wir jetzt ebenfalls die position: relative für blue, sind die beiden HTML-Elemente theoretisch auf der selben Ebene. Weil jedoch blue in der DOM nach red steht liegt blue oben auf:

CSS

.container {
   background-color: lightgoldenrodyellow;
   padding: 100px;
}

.red {
   background-color: red;
   height: 100px;
   width: 100px;
   position: absolute;
}

.blue {
   background-color: blue;
   height: 200px;
   width: 200px;
   margin-left: 40px;
   margin-top: 40px;
   position: relative;
}

Jetzt haben sowohl red als auch blue eine definierte position. Das bedeutet, dass ein z-index definiert werden kann:

CSS

.container {
   background-color: lightgoldenrodyellow;
   padding: 100px;
}

.red {
   background-color: red;
   height: 100px;
   width: 100px;
   position: absolute;
   z-index: 2;
}

.blue {
   background-color: blue;
   height: 200px;
   width: 200px;
   margin-left: 40px;
   margin-top: 40px;
   position: relative;
   z-index: 1;
}

Weil jetzt red einen höheren z-index hat als blue liegt wiederum red oben auf.