Zum Inhalt springen

visibility: Elemente mit CSS ausblenden

Mit der Eigenschaft visibility kann ein Element versteckt werden ohne es aus dem Textfluss zu nehmen (wie es bei display: none der Fall wäre). Unsichtbar bedeutet in diesem Fall also vollständig transparent.

Werte

WertBedeutungBeispiel
visibleElement wird normal angezeigt.visibility: visible
hiddenElement wird nicht angezeigt, der Textfluss wird aber nicht beeinflusst.visibility: hidden
collapseNur für Tabellen: Zelle oder Zeile wird versteckt und gibt den benötigten Platz frei. Tabellen-Zeilen werden so also komplett ausgeblendet. Bei anderen Elementen selbe Wirkung wie hidden.visibility: collapse

Beispiel für visibility:

<p>Text davor</p>
<p style="visibility: hidden;" id="example">Text innerhalb</p>
<p>Text dannach</p>
<p><a href="#" onclick="document.getElementById('example').style.visibility = 'visible'; return false;">Test</a>
</p>

Nach oben