Viditelnost v CSS

#1 Viditelnost vs. display

Vlastnost visibility, i když podobná vlastnosti display: none;, se od ní liší.

Vlastnost display: none; způsobuje, že HTML daný prvek „ignoruje“ a vůbec ho nezobrazí – daný prvek nijak neovlivňuje rozložení, pro koncového uživatele „neexistuje“. Naproti tomu, vlastnost visibility pouze určuje zda je prvek viditelný nebo ne, ale pořád se na stránce nachází a ovlivňuje její rozložení – nachází se tam prázdné, ale „funkční“ místo.

Příklad

Následující příklad ukazuje dva texty mezi dalšími prvky, z nichž první se nijak nezobrazí (vlastnost display: none;) a druhý tam zanechá prázdné místo (vlastnost visibility: hidden;).

<h1>Nadpis</h1>

<p id="display">První text, který „neexsituje“.</p>

<p>Odstavec textu, který je vidět neustále.</p>

<p id="visibility">Odstavec textu, který je neviditelný.</p>

<p>Poslední odstavec textu.</p>

#display {

 display: none;

}

#visibility {

 visibility: hidden;

}

#2 Hodnoty vlastnosti visibility

Vlastnost visibility může obsahovat následující hodnoty: