visibility

visibility steuert, ob ein Element sichtbar oder unsichtbar ist. Der entscheidende Unterschied zu display: none: Ein Element mit visibility: hidden ist zwar unsichtbar, nimmt aber weiterhin Platz im Layout ein. Das macht visibility besonders nützlich für Animationen und Situationen, in denen das Layout stabil bleiben soll. Zusammen mit opacity lassen sich sanfte Ein- und Ausblendeffekte umsetzen.

Steckbrief visibility

Syntax: visibility: visible | hidden | collapse
Initialwert: visible
Vererbt: Ja
Animierbar: Ja

Kategorie: Display & Sichtbarkeit
Werte: 3
Beispiele: 4
Browser: 5 von 5
E-Mail: 2 von 5
Stand: 15.02.2026

Grundlagen

Wenn du ein Element mit visibility: hidden ausblendest, passiert Folgendes: Die Box des Elements bleibt im Layout erhalten, der Platz wird reserviert, aber der Inhalt ist unsichtbar. Das ist fundamental anders als display: none, wo das Element komplett aus dem Rendering entfernt wird.

Eine Besonderheit: visibility wird vererbt. Wenn ein Elternelement visibility: hidden hat, sind alle Kinder ebenfalls unsichtbar. Aber ein Kind kann sich selbst mit visibility: visible wieder sichtbar machen. Bei display: none ist das nicht möglich.

Für Screenreader und die Tab-Navigation ist ein Element mit visibility: hidden nicht erreichbar. Es ist also nicht nur visuell, sondern auch für assistive Technologien versteckt.

Syntax & Werte

3 Werte

Wert	Beschreibung	Beispiel
`visible`	Element ist sichtbar. (Standard)	visibility: visible
`hidden`	Element ist unsichtbar, nimmt aber weiterhin Platz ein. Events wie Klicks werden nicht ausgelöst.	visibility: hidden
`collapse`	Für Tabellenzeilen und -spalten: entfernt die Zeile/Spalte, ohne das Tabellen-Layout neu zu berechnen. Auf anderen Elementen verhält es sich wie hidden.	visibility: collapse

Beispiele

4 Beispiele

visibility: hidden vs. display: none

/* Unsichtbar, aber Platz bleibt erhalten */
.vis-hidden {
  visibility: hidden;
}

/* Komplett entfernt, kein Platz */
.disp-none {
  display: none;
}

<div class="compare">
<div class="compare-col">
  <div class="compare-label">visibility: hidden</div>
  <div class="box box-1">Box 1</div>
  <div class="box box-2 vis-hidden">Box 2 (hidden)</div>
  <div class="box box-3">Box 3</div>
</div>
<div class="compare-col">
  <div class="compare-label">display: none</div>
  <div class="box box-1">Box 1</div>
  <div class="box box-2 disp-none">Box 2 (none)</div>
  <div class="box box-3">Box 3</div>
</div>
</div>

Ein Kind kann sich selbst wieder sichtbar machen, obwohl das Elternelement visibility: hidden hat. Das funktioniert nur mit visibility, nicht mit display: none.

Kind überschreibt visibility

.parent {
  visibility: hidden;
}

/* Kind macht sich selbst sichtbar */
.child-visible {
  visibility: visible;
}

/* Kind erbt hidden vom Elternelement */
.child-hidden {
  /* visibility: hidden (geerbt) */
}

<div class="label">Elternelement hat visibility: hidden:</div>
<div class="parent-hidden">
<div class="child-visible">visibility: visible (sichtbar!)</div>
<div class="child-hidden">Erbt hidden (unsichtbar)</div>
</div>

visibility: collapse ist speziell für Tabellen gedacht. Es entfernt eine Zeile, ohne dass die Spaltenbreiten neu berechnet werden. Bei normalen Elementen verhält es sich wie hidden.

visibility: collapse bei Tabellenzeilen

/* Zeile wird entfernt, Spaltenbreiten bleiben */
.row-collapse {
  visibility: collapse;
}

<table class="demo-table">
<tr><th>Name</th><th>Rolle</th><th>Status</th></tr>
<tr><td>Anna</td><td>Entwicklerin</td><td>Aktiv</td></tr>
<tr class="row-collapse"><td>Max</td><td>Designer</td><td>Inaktiv</td></tr>
<tr><td>Lisa</td><td>PM</td><td>Aktiv</td></tr>
</table>

visibility allein kann nicht sanft animiert werden, es springt zwischen sichtbar und unsichtbar. In Kombination mit opacity bekommst du einen weichen Übergang, der gleichzeitig Klick-Events korrekt blockiert.

Sanftes Ausblenden mit visibility + opacity

.card {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s;
}

.card.hidden {
  opacity: 0;
  visibility: hidden;
  /* opacity sorgt für den sanften Übergang */
  /* visibility blockiert Klicks nach dem Ausblenden */
}

<button class="fade-trigger">Hover für Ausblenden</button>
<div class="fade-card">Dieses Element blendet sanft aus, wenn du den Button hoverst.</div>

Barrierefreiheit

visibility: hidden entfernt Elemente aus der Tab-Reihenfolge und macht sie für Screenreader unzugänglich. Das ist das korrekte Verhalten für temporär versteckte Inhalte wie Tooltips, Dropdowns oder modale Dialoge, die erst bei Interaktion sichtbar werden.

Der Unterschied zu display: none: Beide entfernen das Element aus dem Accessibility Tree, aber visibility: hidden erhält das Layout und lässt sich mit CSS Transitions animieren. Für sanfte Ein-/Ausblend-Effekte kombiniere es mit opacity:

.fade {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s, visibility 0.3s;
}

.fade.hidden {
  opacity: 0;
  visibility: hidden;
}

Für Content, der nur visuell versteckt werden soll (z.B. “Springe zum Inhalt”-Links oder zusätzliche Kontextinformationen für Screenreader), verwende stattdessen das sr-only Pattern mit position: absolute und clip. Diese Technik hält Inhalte für Screenreader zugänglich, während sie visuell verschwinden.

visibility: collapse bei Tabellen: Achte darauf, dass beim dynamischen Ein-/Ausblenden von Tabellenzeilen die Tabellenstruktur für Screenreader nachvollziehbar bleibt. Wenn du Zeilen basierend auf Benutzer-Interaktionen ausblendest, verwende aria-expanded und aria-controls, um die Beziehungen klar zu kommunizieren.

Häufige Fehler

4 Fehler

01 visibility: hidden mit display: none verwechseln

visibility: hidden reserviert weiterhin Platz. Wenn du das Element komplett aus dem Layout entfernen willst, verwende display: none.

02 Nur opacity: 0 ohne visibility: hidden verwenden

Ein Element mit opacity: 0 ist unsichtbar, reagiert aber weiterhin auf Klicks und Hover. Kombiniere immer opacity: 0 mit visibility: hidden, um Events zu blockieren.

03 visibility: collapse außerhalb von Tabellen verwenden

collapse ist nur für Tabellenzeilen und -spalten gedacht. Auf anderen Elementen verhält es sich wie hidden, was verwirrend sein kann.

04 Erwarten, dass visibility: hidden Screenreader blockiert

Das ist zwar der Fall, aber wenn du Inhalte nur visuell verstecken willst (für Screenreader aber sichtbar lassen), brauchst du stattdessen eine sr-only/visually-hidden CSS-Klasse.

Browser-Kompatibilität

5 von 5

visibility wird von allen Browsern vollständig unterstützt. Das Verhalten von collapse variiert leicht zwischen Browsern, ist aber in allen modernen Browsern implementiert.

Chrome

Komplett
Firefox

Komplett
Safari

Komplett
Edge

Komplett
Opera

Komplett

Email-Kompatibilität

2 von 5

visibility wird in HTML-Emails grundsätzlich unterstützt, aber mit Einschränkungen.

Apple Mail

Komplett
Gmail

Teilweise

visibility: hidden funktioniert, collapse wird wie hidden behandelt
Outlook

Teilweise

visibility: hidden funktioniert. Transitions werden ignoriert
Thunderbird

Komplett
Yahoo Mail

Teilweise

Grundlegende Unterstützung für visible und hidden

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da