position: Elemente aus dem Fluss lösen
Normalerweise ordnet der Browser Elemente brav von oben nach unten an, das nennt sich der normale Fluss. Mit position löst du einzelne Elemente daraus und setzt sie gezielt irgendwohin: in eine Ecke, über andere Inhalte, an den Bildschirmrand geheftet.
Die fünf Werte
| Wert | Verhalten |
|---|---|
static | Der Standard: brav im Fluss, die Richtungsangaben wirken nicht. |
relative | Bleibt im Fluss, lässt sich aber relativ zur eigenen Position verschieben. Wichtigster Nebeneffekt: wird zum Bezugsrahmen für absolute Kinder. |
absolute | Raus aus dem Fluss, positioniert relativ zum nächsten positionierten Vorfahren. Belegt keinen Platz mehr, die anderen rücken nach. |
fixed | Klebt am Browserfenster und scrollt nicht mit. Cookie-Banner und schwebende Buttons lassen grüßen. |
sticky | Der Hybrid: scrollt normal mit, bis eine Schwelle erreicht ist, dann bleibt es haften. Perfekt für Kopfzeilen die beim Scrollen oben stehen bleiben. |
Das Duo relative + absolute
CSS-Code: Badge in der Bildecke
.karte { position: relative; }
.karte .badge {
position: absolute;
top: 8px;
right: 8px;
}Das ist das Standardrezept: Der Elternkasten bekommt relative (rein als Bezugsrahmen, verschoben wird nichts), das Kind mit absolute orientiert sich dann an dessen Ecken statt an der ganzen Seite. Die Richtungsangaben top, right, bottom und left messen jeweils den Abstand zur entsprechenden Kannte.
Überlappung: z-index
Positionierte Elemente können sich überdecken, die Stapelreihenfolge regelt z-index: höhere Zahl liegt obenauf. Der Wert wirkt nur an positionierten Elementen, und wer mit z-index: 99999 um sich wirft, verschiebt das Problem meist nur nach oben. Kleine, nachvollziehbare Stufen reichn.
Typische Fehler
- absolute ohne positionierten Vorfahren, das Element orientiert sich dann an der ganzen Seite und landet gefühlt "irgendwo".
- Ganze Layouts aus absoluten Elementen zusammenpinnen. Das war vor Flexbox und Grid mal ein Notbehelf und bricht bei jeder Textänderung.
- fixed-Elemente die auf kleinen Bildschirmen den halben Inhalt verdecken. Immer mobil gegentesten.