Normaler Fluss und Position

Ab heute geht es um Layout, und wir wechseln das Beispiel: Statt einer Website bauen wir das Aufgabenbrett, eine kleine Web-App mit Kopf, Seitenleiste und Karten. Sie entsteht in den nächsten zwei Tagen Schritt für Schritt.

Was du am Ende kannst

• den normalen Fluss und seine Regeln erklären
• display gezielt einsetzen
• die fünf Werte von position unterscheiden
• den Bezugspunkt eines positionierten Elements bestimmen
• z-index und Stapelkontexte einordnen

Live-Coding zum Mitmachen

⤓ demo-12-fluss-und-position.zip herunterladen

Der Ordner starter ist der Ausgangsstand, fertig der Stand nach dem Live-Coding.

Enthält: index.html, stil.css

Der normale Fluss

Ohne Layout-Anweisungen ordnet der Browser so an, wie du es von Tag 1 kennst:

• Block-Elemente (div, p, h1, section, …) nehmen die volle Breite und stehen untereinander.
• Inline-Elemente (a, span, em, …) laufen wie Wörter im Text mit.

Der Fluss ist nichts, wogegen man kämpfen muss. Er ist von Haus aus responsiv: Der Text bricht um, und die Blöcke werden so hoch wie nötig. Gute Layouts weichen nur dort ab, wo es nötig ist.

display

block, inline, inline-block

.b { display: block; background: #e0e7ff; margin: 0.25rem 0; padding: 0.25rem; }
.i { display: inline; background: #fef3c7; padding: 0.25rem; }
.ib { display: inline-block; background: #dcfce7; padding: 0.5rem; margin: 0.25rem; }

<div class="b">block: neue Zeile, volle Breite</div>
<div class="b">block: nächste Zeile</div>
<p>Im Text: <span class="i">inline</span> läuft mit, ignoriert aber Höhe und Außenabstand oben und unten.
<span class="ib">inline-block</span> läuft auch mit, nimmt aber alle Abstände an.</p>

Wert	Wirkung
block	wie oben
inline	wie oben; width, height und vertikale margin wirken nicht
inline-block	läuft im Text mit, nimmt aber alle Größen an
flex, grid	die Kinder werden angeordnet (die nächsten Kapitel)
none	ist ganz weg, auch für Screenreader

position

Vier Werte in einem Behälter

Wert	Bleibt im Fluss?	Bezugspunkt	Typischer Einsatz
static	ja	keiner; Standard	alles
relative	ja, sein Platz bleibt frei	die eigene Position	Bezugspunkt für Kinder
absolute	nein	nächster positionierter Vorfahr	Marken, Ecken, Overlays
fixed	nein	das Fenster	Dauerhaft sichtbare Knöpfe
sticky	ja, bis zur Klebestelle	nächster scrollender Vorfahr	Kopfzeilen, Tabellenköpfe

Die häufigste Kombination: Das Elternelement bekommt position: relative, ohne es zu verschieben, das Kind position: absolute. So hängt das Kind an der Ecke des Elternelements.

.karte { position: relative; }
.neu   { position: absolute; top: -0.5rem; right: 0.5rem; }

sticky

Das Element läuft im Fluss mit, bis es den angegebenen Abstand erreicht, und bleibt dort stehen.

Scrolle im Rahmen

body { margin: 0; }
header { position: sticky; top: 0; padding: 0.5rem 1rem; background: #312e81; color: #fff; }
p { margin: 1rem; }

<header>Scrolle in diesem Fenster: Ich bleibe oben kleben.</header>
<p>Absatz eins</p><p>Absatz zwei</p><p>Absatz drei</p><p>Absatz vier</p><p>Absatz fünf</p>
<p>Absatz sechs</p><p>Absatz sieben</p><p>Absatz acht</p><p>Absatz neun</p><p>Absatz zehn</p>

Sticky scheitert meist an einem von zwei Gründen: top fehlt, oder ein Vorfahr hat overflow: hidden.

z-index und Stapelkontexte

Positionierte Elemente liegen über normalen, und bei Überschneidung entscheidet z-index. Er gilt aber nur innerhalb desselben Stapelkontexts. Einen neuen Kontext erzeugen unter anderem opacity unter 1, transform und position mit z-index. Daher der Klassiker: z-index: 9999 hilft nicht, weil das Element in einem Kontext steckt, der insgesamt tiefer liegt.

Halte die Werte klein und nachvollziehbar. Mehr als drei Stufen (Inhalt, Kopf, Dialog) braucht kaum eine Seite.

Altlast: float

Vor Flexbox und Grid baute man Spalten mit float und clearfix. In alten Stylesheets siehst du das noch. Heute dient float nur noch dazu, Text um ein Bild fließen zu lassen.

Live-Coding: Der Rohbau des Aufgabenbretts

Der Starter hat bereits saubere Semantik und Farben, wie gestern gelernt. Aber alles steht untereinander. Wir ergänzen einen klebenden Kopf, die Marke „Neu“ und den Sprunglink.

index.html

  <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a>

  <header class="kopf">
    <p class="marke">Aufgabenbrett</p>
    <p class="nutzer">Angemeldet als Alex</p>
  </header>

  <nav class="seitenleiste" aria-label="Hauptmenü">
    <ul>
          <li><a href="index.html" aria-current="page">Mein Brett</a></li>
          <li><a href="#">Team</a></li>
          <li><a href="#">Übersicht</a></li>
    </ul>
  </nav>

  <main class="inhalt" id="inhalt">
    <h1>Projekt Umzug</h1>

    <div class="brett">
      <section class="spalte">
        <h2>Offen</h2>
        <ul class="karten">
          <li class="karte">
            <h3>Kartons besorgen</h3>
            <p class="neu">Neu</p>
            <p>Dreißig Stück, dazu Klebeband und Stifte.</p>
            <p class="karte-fuss"><span class="stufe stufe-hoch">Hoch</span> <time datetime="2026-11-20">20. Nov.</time></p>

stil.css

/* Der Kopf bleibt beim Scrollen oben */
.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Die Marke „Neu“ hängt an der Ecke ihrer Karte */
.karte {
  position: relative;
}

.neu {
  position: absolute;
  top: calc(var(--abstand-s) * -1);
  right: var(--abstand-s);
  padding: 0 var(--abstand-s);
  border-radius: 999px;
  background: var(--farbe-akzent);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

/* Inline-Block: läuft im Text mit, nimmt aber Abstände an */
.stufe {
  display: inline-block;
}

/* Der Sprunglink wartet außerhalb des Bildes auf den Fokus */
.sprunglink {
  position: absolute;
  top: -4rem;
  left: var(--abstand-m);
  z-index: 20;
  padding: var(--abstand-s) var(--abstand-m);
  border-radius: var(--radius);
  background: #fff;
}

.sprunglink:focus {
  top: var(--abstand-s);
}

Übung

Starter für die Übung

⤓ uebung-12-fluss-und-position.zip herunterladen

ZIP-Datei entpacken und den Ordner in VS Code öffnen (Datei → Ordner öffnen).

Enthält: index.html, stil.css, uebung.css

Schreibe deine Regeln in uebung.css. Das HTML ist vorbereitet.

Stufe 1: Zähler

Der Menüeintrag „Team“ enthält .zaehler. Setze ihn als runde rote Marke an den rechten Rand des Links.

Stufe 2: Immer erreichbar

Der Link .nach-oben soll fest in der rechten unteren Ecke des Fensters stehen.

Stufe 3: Klebrige Spaltentitel

Verkleinere das Fenster so, dass du scrollen musst. Die h2 jeder Spalte soll direkt unter dem Kopf kleben bleiben. Was passiert ohne Hintergrundfarbe?

Für Schnelle

Erkläre, warum isolation: isolate an der Karte verhindert, dass eine hohe Marke andere Bereiche überdeckt. Teste es, indem du .neu einen z-index von 100 gibst.