CSS Zichtbaarheid
De eigenschap visibility bepaalt of een element zichtbaar of verborgen moet worden.display: none
visibility: hidden
Standaard waarde
CSS visibility eigenschap
Je kunt de eigenschap visibility gebruiken om te bepalen of een element zichtbaar is of niet. De eigenschap wordt vooral toegepast als delen van de inhoud van een document de ene keer wel en de andere keer niet zichtbaar moet zijn. Deze eigenschap kan één van de volgende waarden in de onderstaande tabel nemen.
| Waarde | Omschrijving |
|---|---|
| visible | Het element is normaal zichtbaar, dit is de standaardwaarde. |
| hidden | De box en de inhoud ervan zijn onzichtbaar, maar hebben nog steeds invloed op de lay-out van de pagina. |
| collapse | De waarde collapse is specifiek bedoeld voor tabellen en kan gebruikt worden om rijen, rijgroepen, kolommen, of kolomgroepen te verbergen. |
| inherit | De waarde van het parent element wordt aangehouden. |
 |
De eigenschap visibility met de waarde collapse, verwijdert de interne tabelelementen, maar heeft echter geen invloed op de lay-out. |
CSS visibility vs display
Het verbergen van een element kan worden gedaan door de eigenschap display op none te stellen. Het element wordt verborgen en de pagina wordt weergegeven alsof het element er niet is.
Voorbeeld:
Visibility: hidden; verbergt ook een element.
Het element neemt echter nog steeds dezelfde ruimte in beslag als voorheen. Het element zal worden verborgen, maar heeft nog steeds invloed op de lay-out.
|
Zoals je in de bovenstaande voorbeelden hebt gezien lijken de eigenschappen display en visibility hetzelfde, maar ze zijn in feite heel anders en verwarren vaak degenen die nieuw zijn in CSS. |
In het kort...
Visibility: hidden;Verbergt het element, maar het neemt nog steeds ruimte in beslag in de lay-out. Let wel op dat onderliggende elementen van een verborgen box zichtbaar zijn als hun visibility is ingesteld op visible.
Display: none;Schakelt de weergave uit en verwijdert het element volledig uit het document. Het neemt geen ruimte in beslag. Alle onderliggende elementen hebben ook hun weergave uitgeschakeld, zelfs als hun display eigenschap is ingesteld op iets anders dan none.
