HTML + CSS: display, position und Überlagerung

Kurz: Für Inhalte, die nur Screenreader lesen sollen (zum Beispiel ein Text für ein Icon), nutzt man eine “visually hidden”-Klasse:

Teil des Kurses HTML + CSS

Kapitel 18 von 27 im Kurs HTML + CSS. Mit Fortschritt, Quiz und Zertifikat auf der Lernseite.

display: wie sich ein Element im Fluss verhält

Wert	Verhalten
block	eigene Zeile, volle Breite; width/height/margin wirken
inline	im Textfluss; width/height wirken nicht
inline-block	im Textfluss, aber mit Größen
none	nicht dargestellt und ohne Platz
flex, grid	Layout-Container (eigene Kapitel)
contents	Element selbst “verschwindet”, Kinder bleiben

<style>
  .box { background: #bfdbfe; padding: 6px; margin: 2px; border: 1px solid #1e40af; }
  .b { display: block; }
  .i { display: inline; width: 200px; height: 50px; }     /* Größe wirkt nicht */
  .ib { display: inline-block; width: 100px; height: 40px; vertical-align: top; }
  .n { display: none; }
</style>
<span class="box b">block</span>
<span class="box i">inline (Größen wirken nicht)</span>
<span class="box ib">inline-block</span><span class="box ib">nebeneinander</span>
<span class="box n">unsichtbar und ohne Platz</span>

Sichtbarkeit

Eigenschaft	Wirkung
display: none	entfernt aus Layout und für Screenreader
visibility: hidden	unsichtbar, behält Platz
opacity: 0	durchsichtig, bleibt klickbar, Screenreader lesen es
hidden-Attribut	wie display: none

Für Inhalte, die nur Screenreader lesen sollen (zum Beispiel ein Text für ein Icon), nutzt man eine “visually hidden”-Klasse:

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

position: Elemente gezielt platzieren

Wert	Verhalten
static	Standard, normaler Fluss
relative	im Fluss, aber mit top/left verschiebbar; Bezugspunkt für Kinder
absolute	aus dem Fluss genommen; richtet sich am nächsten positionierten Vorfahren aus
fixed	bleibt am Fenster stehen (Kopfzeile, Cookie-Banner)
sticky	scrollt mit, bis eine Grenze erreicht ist, dann klebt es

<style>
  .eltern { position: relative; height: 130px; background: #f1f5f9; border: 2px solid #94a3b8; }
  .kind { position: absolute; background: #fbbf24; padding: 4px 8px; }
  .tl { top: 8px; left: 8px; }
  .br { bottom: 8px; right: 8px; }
  .mitte { top: 50%; left: 50%; transform: translate(-50%, -50%); background: #34d399; }
</style>
<div class="eltern">
  <span class="kind tl">oben links</span>
  <span class="kind br">unten rechts</span>
  <span class="kind mitte">genau mittig</span>
</div>

Das Elternelement mit position: relative ist der Bezugspunkt. Ohne ihn orientiert sich absolute an der ganzen Seite.

sticky

<style>
  .scroll { height: 140px; overflow: auto; border: 2px solid #94a3b8; }
  .scroll h3 { position: sticky; top: 0; margin: 0; background: #1e3a8a; color: white; padding: 6px; }
  .scroll p { margin: 0; padding: 6px; height: 60px; }
</style>
<div class="scroll">
  <h3>Abschnitt A</h3><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p>
  <h3>Abschnitt B</h3><p>Inhalt</p><p>Inhalt</p><p>Inhalt</p>
</div>

Scrolle im Kasten: Die Überschriften “kleben” oben fest. Praktisch für Tabellenköpfe und Navigationsleisten.

z-index: Überlagerung

Positionierte Elemente können sich überlappen. z-index legt fest, wer oben liegt (höhere Zahl = weiter vorn).

<style>
  .stapel { position: relative; height: 130px; }
  .stapel div { position: absolute; width: 100px; height: 80px; color: white; padding: 6px; }
  .r { background: crimson; left: 0; top: 0; z-index: 1; }
  .g { background: seagreen; left: 50px; top: 30px; z-index: 3; }
  .b { background: royalblue; left: 100px; top: 10px; z-index: 2; }
</style>
<div class="stapel"><div class="r">1</div><div class="g">3 (oben)</div><div class="b">2</div></div>

z-index wirkt nur bei positionierten Elementen (und Flex/Grid-Kindern). Jeder Stapelkontext (position mit z-index, transform, opacity < 1) bildet eine eigene Ebene: Ein Kind kann nie über ein Element außerhalb seines Stapelkontexts hinaus, egal wie hoch sein z-index ist. Halte z-index-Werte klein und dokumentiere sie (zum Beispiel als Variablen).

float (veraltet für Layout)

float lässt Elemente seitlich im Text umfließen, früher auch für Layouts. Heute nutzt man dafür Flexbox und Grid; float bleibt nur für Bilder mit Textumfluss:

<style>
  img.links { float: left; margin: 0 12px 6px 0; }
  .clear::after { content: ""; display: table; clear: both; }
</style>
<div class="clear">
  <svg class="links" width="70" height="70"><rect width="70" height="70" rx="12" fill="#f59e0b"/></svg>
  <p>Der Text fließt rechts um die Grafik herum und setzt sich darunter fort, sobald er länger ist als das Bild hoch ist. So war das früher bei Zeitungsseiten üblich.</p>
</div>

Überlauf und Scrollen

<style>
  .reihe { display: flex; overflow-x: auto; gap: 8px; scroll-snap-type: x mandatory; padding: 4px; border: 1px solid #aaa; }
  .reihe div { flex: 0 0 120px; height: 70px; background: #a5b4fc; scroll-snap-align: start; display: grid; place-items: center; }
</style>
<div class="reihe"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div>

Mit scroll-snap rasten Elemente beim Scrollen ein: ideal für Karussells.

Cursor und Interaktion

cursor: pointer zeigt eine Hand, not-allowed ein Verbot, grab eine greifende Hand. pointer-events: none macht ein Element für die Maus “durchlässig”. user-select: none verhindert Textmarkierung (sparsam einsetzen).

Merke

• display bestimmt das Flussverhalten: block, inline, inline-block, none, flex, grid
• display: none entfernt völlig, visibility: hidden behält den Platz
• position: relative + absolute platziert in einem Elternelement; fixed am Fenster; sticky klebt
• z-index ordnet die Überlagerung; Stapelkontexte beachten
• Für Layout statt float lieber Flexbox und Grid

Übungsaufgabe

Baue eine Kopfzeile, die beim Scrollen oben kleben bleibt (sticky), und ein Abzeichen (Zahl in einem Kreis) in der oberen rechten Ecke einer Karte.

Quiz zur Selbstkontrolle

Wozu gehört position: absolute?

• Es richtet sich am nächsten positionierten Vorfahren aus (richtig)
• Es bleibt immer am Fenster
• Es nimmt Platz im normalen Fluss
• Es zentriert das Element

Was ist der Unterschied zwischen display: none und visibility: hidden?

• none entfernt das Element samt Platz, hidden behält den Platz (richtig)
• Kein Unterschied
• hidden entfernt den Platz
• none macht es durchsichtig

Was macht position: sticky?

• Das Element scrollt mit und bleibt an einer Grenze haften (richtig)
• Das Element klebt immer am Fenster
• Das Element verschwindet
• Das Element wird relativ zum Elternelement

Weiter im Kurs

Zurück: Das Box-Modell

Weiter: Layout mit Flexbox

Alle Kapitel: HTML + CSS im Überblick