Positionierung (static, relative, absolute, fixed, sticky)

Mit position steuerst du, wie ein Element im Layout platziert wird. Zusammen mit top, right, bottom und left verschiebst du Elemente gezielt – je nach Wert bleiben sie im Fluss oder werden herausgelöst.

position: static

Der Standardwert. Das Element bleibt im normalen Dokumentenfluss. top, right, bottom und left haben keine Wirkung.

1.box {
2    padding: 12px;
3    border: 2px solid royalblue;
4    background-color: #d6eaf8;
5}
6
7.no-offset {
8    position: static;
9    top: 20px;
10    left: 40px;
11}

position: relative

Das Element bleibt im Fluss, kann aber verschoben werden. Der ursprüngliche Platz bleibt frei. Box 2 nutzt dieselben Abstände wie oben, diesmal mit position: relative.

1.box {
2    padding: 12px;
3    border: 2px solid royalblue;
4    background-color: #d6eaf8;
5}
6
7.offset {
8    position: relative;
9    top: 16px;
10    left: 40px;
11    border-color: #e67e22;
12    background-color: #fdebd0;
13}

position: absolute

Das Element wird aus dem Fluss genommen und am nächsten Vorfahren ausgerichtet, dessen position nicht static ist. Ohne solchen Vorfahren gilt der Viewport. Hier ist die Karte der Bezugspunkt, das Badge sitzt oben rechts.

1.card {
2    position: relative;
3    min-height: 110px;
4    padding: 16px;
5    border: 2px dashed #888;
6    background-color: #f9f9f9;
7}
8
9.badge {
10    position: absolute;
11    top: 10px;
12    right: 10px;
13    padding: 4px 10px;
14    background-color: #8e44ad;
15    color: #fff;
16}

position: fixed

Wie absolute, aber der Bezug ist der Viewport. Die Leiste bleibt beim Scrollen an derselben Stelle. In der Vorschau ist der gestrichelte Bereich dieser Viewport.

1.bar {
2    position: fixed;
3    top: 0;
4    left: 0;
5    right: 0;
6    padding: 8px 12px;
7    background-color: #2980b9;
8    color: #fff;
9    text-align: center;
10}

position: sticky

Eine Mischung aus relative und fixed. Das Element scrollt zuerst normal mit und klebt erst, wenn es den Wert von top erreicht.

1.heading {
2    position: sticky;
3    top: 0;
4    padding: 8px 12px;
5    background-color: #27ae60;
6    color: #fff;
7}