Nehmen wir mal folgendes an: wir haben im Quelltext unserer Webseite ein Element definiert, welches unter gewissen Bedingungen nicht angezeigt werden soll. Warum auch immer.

Als Grund fällt mir ein:

  • das Ein- oder Ausblenden soll mittels transition animiert werden
  • ein Untermenü einer Navigation soll nur eingeblendet werden, wenn das übergeordnete Listenelement aktiv wird
  • bestimmte Elemente sollen im responsiven Layout nicht angezeigt werden
  • beim Checkbox-Hack sollen Bereich nur auf Mausklick angezeigt werden

Um ein Element auszublenden oder zu verstecken, gibt es mehrere Wege. Ich stelle in diesem Beitrag die Möglichkeiten vor, die mir so eingefallen sind.

Gehen wir mal von folgendem Element aus, welches nicht angezeigt werden soll:

.versteckt {
	width: 200px;
	height: 100px;
	padding: 20px;
}

Um die Auswirkungen auf umliegende Elemente zu demonstrieren, habe ich oben und unten jeweils ein gleichgroßes Element positioniert:

Alle Elemente eingeblendet

Los geht’s.

Vermutlich die am meisten genutzte Eigenschaft um Elemente auszublenden ist display:

.versteckt {
	display: none;
}

Das Element wird hierbei nicht angezeigt und benötigt auch keinen Platz. Umliegende Elemente werden so dargestellt, als ob es das Element nicht geben würde:

Element mit der Eigenschaft "display" ausgeblendet

Anzumerken ist, dass auf die Eigenschaft display keine transition-Effekte angewendet werden können.

Nächste Möglichkeit: mittels der Eigenschaft opacity setzen wir die Sichtbarkeit des Objektes auf null.

.versteckt {
	opacity: 0;
}

Das Element ist aber nach wie vor vorhanden und bleibt daher an seinem definierten Platz. Es ist nur nicht zu sehen.

Element mit der Eigenschaft "opacity" ausgeblendet

Im Gegensatz zu display lässt sich das ein- und ausblenden per transition animieren.

Weitere Möglichkeit: das Element wird absolut positioniert und aus dem sichtbaren Bereich ins virtuelle Nirvana geschickt:

.versteckt {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

Da das Element verschoben wird, hat es keinen Einfluss mehr auf die umliegenden Elemente:

Element absolut positioniert und mit Startpositionen verschoben

Wenn ihr diese Möglichkeit nutzt, denkt daran, das Element weit genug außerhalb zu positionieren. Es gibt durchaus Anwender, welche mit Auflösungen jenseits von 2000 Pixeln arbeiten. Ist das Element dann nur um 1000 Pixel nach links verschoben, ist es doch wieder sichtbar.

Und noch eine Möglichkeit: mit der Eigenschaft visibility wird das Element ausgeblendet. Die Wirkung ist äquivalent zu opacity, wobei es mit opacity möglich ist, den Grad der Sichtbarkeit des Objektes zu steuern.

.versteckt {
	visibility: hidden;
}

Wie bei opacity ist das Element weiterhin da, wo wir es platziert haben, es wird jedoch nicht angezeigt. Auswirkung auf umliegende Elemente:

Element mit der Eigenschaft "visiblity" ausgeblendet

Visibility lässt sich ebenso wie opacity mit transition animieren.

Noch ein (etwas frickeliger) Weg, ein Element zu verstecken: das Element wird absolut positioniert und per z-index in der Reihenfolge der Anzeige hinter das eigentlich darüber liegende Element verschoben:

.versteckt {
	position: absolute;
	z-index: -1;
}

Dazu muss man wissen, dass Elemente normalerweise in der Reihenfolge angezeigt werden, in der sie im Quelltext definiert wurden. Diese Reihenfolge kann man beeinflussen, indem man den positionierten Elementen einen z-index gibt.

Um das zu verdeutlichen der Quelltext aus unserem Beispiel:

<div class="sichtbar-oben">
	Dieses Element bleibt sichtbar und demonstriert die Auswirkung auf das Element "versteckt".
</div>
<div class="versteckt">
	Dieses Element soll versteckt werden.
</div>
<div class="sichtbar-unten">
	Dieses Element bleibt sichtbar und demonstriert die Auswirkung auf das Element "versteckt".
</div>

Wenn wir nun einen negativen z-index für die Klasse versteckt vergeben, wird diese nach der Klasse sichtbar-unten angezeigt und nicht davor, wie im Quelltext definiert.

Wie ihr im folgenden Schaubild seht, macht das aber auch nur dann Sinn, wenn das darüber liegende Element mindestens gleich groß ist und ein Hintergrund definiert ist (zur Verdeutlichung ist das obere und untere Element um die Hälfte verkleinert):

Element ausgeblendet mit "z-index"

Einen letzten hab ich noch: die Farbe für den Hintergrund und die Schrift machen wir transparent:

.versteckt {
	background: transparent;
	color: transparent;
}

Logisch, das Element ist weiter vorhanden und beansprucht weiter seinen Platz:

Hintergrund- und Schriftfarbe transparent

Hast du noch weitere Möglichkeiten Elemente zu verstecken?