visibility

Zuletzt aktualisiert am 15. Februar 2026

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.

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

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>

Vererbung: Kind-Element sichtbar machen

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

.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>

collapse bei Tabellenzeilen

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.

/* 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>

Transition-Trick: visibility + opacity

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.

.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

• visibility: hidden mit display: none verwechseln: visibility: hidden reserviert weiterhin Platz. Wenn du das Element komplett aus dem Layout entfernen willst, verwende display: none.
• 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.
• 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.
• 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

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

Email-Kompatibilität

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

Verwandte Eigenschaften