6.4.2 Positionierung von Elementen

Mit CSS können wir HTML-Elemente nicht nur in eine bestimmte Richtung ausrichten, sondern auch frei positionieren. Zu den Eigenschaften der Positionierung gehören top, right, bottom, left und position. Dieses Kapitel bietet eine Einführung in die grundlegenden Positionsarten und deren Anwendung.

Mit den Eigenschaften top, right, bottom und left legen wir fest, wo ein Element relativ zu oben, rechts, unten oder links beginnen soll. Der Wert kann numerisch sein (z. B. in px, em oder %) oder auto für eine automatische Positionierung.

Die Anordnung dieser Eigenschaften lässt sich wie ein Kompass visualisieren:

Top, right, bottom, left – Kompassanalogie

Beispiel:

1
2
3
4
5
div {
  position: absolute;
  top: 20px;
  left: 15px;
}

Positionsarten (position)

Die Positionsart (position) definiert, wie ein Element im Dokument positioniert wird. Es gibt verschiedene Werte, die jeweils spezifisches Verhalten festlegen:

Wert Beschreibung
static Standardpositionierung ohne spezielle Platzierung. Elemente folgen dem normalen Dokumentfluss.
relative Relativ zur ursprünglichen Position im Dokumentfluss. Das Element wird verschoben, bleibt aber im Fluss.
absolute Relativ zum nächstgelegenen Vorfahrenelement mit nicht-static-Positionierung. Andernfalls relativ zum Dokument.
fixed Relativ zum Viewport, bleibt an derselben Stelle, auch wenn die Seite gescrollt wird.
sticky Kombination aus relative und fixed. Das Element bleibt bis zu einem bestimmten Punkt relativ positioniert und danach fixiert.

Beispiel: Positionsarten

styles.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
body {
    font-family: 'Georgia', serif;
    font-size: 10pt;
    height: 1500px;
}
div {
    border: 1px solid #000000;
    width: 200px; /*Breite*/
    height: 150px; /*Höhe*/
    text-align: center;
}
.d_yellow {
    position: static;
    background-color: #feff9f;
}
.d_blue {
    position: relative;
    top: 5px;
    left: 235px;
    background-color: #c5cdfe;
}
.d_red {
    position: absolute;
    top: 200px;
    background-color: #ffc7d3;
}
.d_green {
    position: fixed;
    margin: 250px; /* Außenabstand */
    background-color: #d3ffdb;
}

index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!doctype html>                                     
<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Positionierung von Elementen</title>
  <link rel="stylesheet" type="text/css" 
    href="css_bsp_positionierungen.css">
</head>
<body>
  <div class="d_green">
    Position: fixed!
  </div>
  <div class="d_yellow">
    Position: static!
  </div>
  <div class="d_blue">
    Position: relative!
  </div>
  <div class="d_red">
    Position: absolute!
  </div>
</body>
</html>

So sieht es im Browser aus