position: relative

Manchmal sitzt ein Element nur einen Pixel daneben, und alles, womit du es zurechtrücken könntest, schiebt die Nachbarn gleich mit. position: relative verschiebt es relativ zu seinem eigenen Platz, ohne dass der Rest der Seite davon etwas merkt. Von den fünf Werten von position ist es der harmloseste.

01 / 02Verschieben, ohne den Platz zu verlieren

<div class="kasten">eins</div>
<div class="kasten verschoben">zwei, um 24px versetzt</div>
<div class="kasten">drei</div>

.kasten {
  padding: 16px;
  margin-bottom: 8px;
  font-family: system-ui, sans-serif;
  background-color: #dbeafe;
}

/* Der Kasten wandert optisch nach unten rechts.
   Sein alter Platz bleibt trotzdem frei, und der
   Kasten darunter rückt nicht nach. */
.verschoben {
  position: relative;
  top: 24px;
  left: 24px;
  background-color: #fde68a;
}

position: relative allein verschiebt nichts. Erst zusammen mit top, right, bottom oder left verschiebt sich das Element, und zwar relativ zu der Stelle, an der es ohnehin gestanden hätte.

Entscheidend ist, was dabei nicht passiert. Der ursprüngliche Platz bleibt reserviert. Die Nachbarn rücken nicht nach, nichts bricht um, und für den Fluss hat sich nichts geändert. Er rechnet weiter mit der alten Stelle. Deshalb überlappt ein weit verschobenes Element seine Nachbarn, statt sie wegzuschieben.

Für kleine optische Korrekturen ist das richtig. Soll ein Element mehr als ein paar Pixel weit wandern, ist es das falsche Werkzeug. An der alten Stelle bleibt dann ein Loch, und an der neuen überlappt es.

top: 10px schiebt dabei nach unten, nicht nach oben. Die Zahl gibt an, wie weit die Oberkante von ihrer alten Position weg ist. Wer das einmal falsch herum liest, liest es jahrelang falsch herum.

inset ist das Shorthand für alle vier Seiten und funktioniert wie margin. Ein Wert gilt für alle, zwei für senkrecht und waagerecht, und vier gehen im Uhrzeigersinn.

02 / 02Wo es wirklich ums Verschieben geht

<p class="zeile ohne"><span class="icon">★</span> Ohne Korrektur sitzt der Stern zu tief.</p>
<p class="zeile mit"><span class="icon">★</span> Zwei Pixel nach oben, und er steht auf der Zeile.</p>

.zeile {
  font-family: system-ui, sans-serif;
  font-size: 18px;
  padding: 8px;
  background-color: #f4f4f5;
  margin-bottom: 8px;
}

.icon {
  color: #2563eb;
  font-size: 22px;
}

/* Verschiebt nur die Optik. Die Zeilenhöhe bleibt
   genau so, wie sie ohne die Korrektur wäre. */
.mit .icon {
  position: relative;
  top: -2px;
}

Bleibt der Fall, für den relative gedacht war. Die kleine Korrektur, die kein anderes Werkzeug sauber hinbekommt.

Ein Symbol neben Text sitzt fast nie exakt auf der Grundlinie, weil Schriftart und Symbolschnitt verschiedene Vorstellungen davon haben. Zwei Pixel nach oben, und es stimmt.

Mit vertical-align: 2px ginge es auch. Das hebt aber die Grundlinie an und macht den Zeilenkasten höher, und bei langen Absätzen wandert dann jede Zeile ein Stück. margin-top scheidet hier von vornherein aus. Der Stern steckt in einem span, und an einem Inline-Element wirkt ein senkrechter Außenabstand gar nicht. Das war schon in der letzten Lektion so.

relative verschiebt nur die Optik, margin und vertical-align verschieben das Layout. Nur die Optik verschiebt auch translate, das in Abschnitt 13 dazukommt. Soll sich sonst nichts ändern, ist relative die richtige Wahl.

Häufiger brauchst du position: relative aber als Bezugsrahmen für Kinder, die mit absolute aus dem Fluss genommen werden. Das kommt in der nächsten Lektion.

In der Aufgabe sitzt der Pfeil hinter einem Link einen Pixel zu hoch.