Lekce 17 - Vykreslování, překrývání a svislé zarovnání prvků v CSS3

V minulé lekci, Rozměry prvků v CSS3, jsme se zabývali CSS vlastnostmi upravujícími rozměry (tedy výšku a šířku) HTML prvků.

V tomto článku se zaměříme na několik vlastností podstatných pro nastavení toho, jak má být určitý prvek na stránce zobrazován.

Jako první se podíváme na CSS3 vlastnost display, pomocí níž je možné prohlížeči sdělit, zda má kupř. vykreslovat prvek jako zarovnaný na řádku (inline), v bloku (block), jako tabulku (table) nebo třeba podle rodičovského elementu, do nějž je vnořen (tedy inherit). Dále se podíváme na vlastnost visibility čili česky "viditelnost", skrze níž lze třeba nastavit, že bude prvek skryt (hidden), rozkládací (collapse) či prostě viditelný (visible).

Následně se přesuneme k vlastnosti z-index. Ta slouží k nastavení překrývání prvků, tedy které elementy budou více v popředí (a tedy se budou ty v pozadí skrývat za ně) a které budou naopak více v pozadí. Dnešní lekci zakončíme potom vlastností vertical-align, skrze níž se u inline elementů a tabulek (table) nastavuje svislé zarovnání.

Display

Pomocí CSS3 vlastnosti display nastavujeme, jakým způsobem má být HTML element vykreslován. Prohlížeč vykresluje různé elementy různým způsobem, rozdíl je zejména v elementech řádkových, blokových a tabulkách. Pomocí této vlastnosti můžeme toto vykreslování ovlivnit.

Hodnoty

• none - Element nebude vykreslen a prohlížeč se bude chovat tak, jako že ve stránce není. Bude tedy přesněji ze stránky vyjmut. Pokud bychom chtěli element pouze skrýt, použijeme vlastnost visibility, kterou se budeme zabývat níže.
• flex - Element se vykreslí jako flexbox.
• block - Element se vykreslí jako blokový. Těmi jsou např. odstavce nebo nadpisy. Bude se roztahovat na nejvyšší možnou šířku a elementy se budou řadit pod sebe.
• inline - Element se vykreslí jako řádkový. Řádkové elementy se vkládají vedle sebe (na řádek) a výška řádku je určena podle nejvyššího elementu na řádku. Řádkovým elementem je např. <span>.
• inline-block - Element je vložen na řádek, ale chová se jako blok.
• inline-flex - Element je vykreslen jako řádkový flexbox.
• inline-table - Element je vykreslen jako řádková tabulka.
• list-item - Element je vykreslen jako položka seznamu.
• table - Element je vykreslen jako tabulka.
• table-caption - Element je vykreslen jako nadpis tabulky.
• table-cell - Element je vykreslen jako buňka tabulky. Toto chování se používá zejména kvůli svislému centrování, protože v tabulkách funguje vlastnost vertical-align, na kterou se podíváme níže.
• table-column - Element je vykreslen jako sloupec tabulky.
• table-column-group - Element je vykreslen jako skupina sloupců (<colgroup>).
• table-footer-group - Element je vykreslen jako skupina patiček tabulky.
• table-header-group - Element je vykreslen jako skupina hlaviček tabulky.
• table-row - Element je vykreslen jako řádek tabulky.
• table-row-group - Element je vykreslen jako skupina řádků tabulky.
• inherit - Vlastnost display bude zděděna od rodičovského elementu.

Ukázka

Zkusme si ten samý element vykreslit různými způsoby, abychom si ukázali rozdíly mezi jednotlivými hodnotami.

Vložme si vedle sebe několik elementů, např. spanů. Výchozí hodnota vlastnosti display pro <span> je inline. Nejprve CSS3 kód:

span
{
    display: inline;
    background-color: #59A4FF;
}

Nyní kód v HTML:

<span>"Nemohu si s tebou hrát",</span>
<span>namítla liška.</span>
<span>Nejsem ochočena.</span>

Podívejme se na výsledek:

Zkusme pro změnu elementům nastavit display na hodnotu block (HTML zůstává stejné):

display: block;

A výsledek:

Blokové elementy se roztahují do šířky a řadí se proto pod sebe. Nyní zkusme tabulku (HTML stále zůstává nezměněno):

display: table;

Výsledek:

Visibility

Pomocí CSS3 vlastnosti visibility můžeme skrýt HTML element. Skrytý element není vykreslován, ale je ve stránce přítomen a je místo něj vykresleno prázdné místo. Pro úplné vyjmutí elementu ze stránky použijte vlastnost display.

Hodnoty

• visible (výchozí) - Element je vykreslován.
• hidden - Element není vykreslován a je skrytý. Je však na stránce stále přítomen a místo něj je vykreslováno prázdné místo.
• collapse - Vlastnost slouží pouze pro tabulkové elementy, po jejich skrytí není narušeno rozložení tabulky.
• inherit - Vlastnost visibility bude zděděna od rodičovského elementu.

Ukázka

Napišme si nejprve HTML kód a jednomu z odstavců dejme id kontejner:

<div>Tento kontejner je běžně viditelný.</div>
<div id="kontejner">Tento kontejner je skrytý, ale stále zabírá místo na stránce.</div>
<div>Tento kontejner je běžně viditelný.</div>

Nyní přidáme CSS kód, kde k id kontejner přiřadíme visibility s hodnotou hidden:

div
{
    background-color: #59A4FF;
    border: 1px solid blue;
}

#kontejner
{
    visibility: hidden;
}

Ve výsledku vidíme, že prostřední odstavec nevidíme:

Z-index

Pomocí CSS3 vlastnosti z-index nastavujeme hloubku (z-souřadnici) HTML elementu na stránce. Pokud se více elementů překrývá, můžeme pomocí této vlastnosti nastavit pořadí, v jakém se mají vykreslovat. Jinými slovy: které budou vpředu a které vzadu. Vlastnost funguje pouze pro pozicované elementy, tedy s position: absolute, fixed a relative.

Hodnoty

• auto (výchozí) - Pořadí vykreslování prvků je založeno na rodičovském elementu.
• číslo - Číslo, určující pořadí, ve kterém se má element vykreslit. Čím vyšší číslo, tím je element výše.
• inherit - Vlastnost z-index bude zděděna od rodičovského elementu.

Ukázka

Mějme kód HTML se zadanými id u kontejnerů:

<div id="modry">Prostřední</div>
<div id="cerveny">Nejnižší</div>
<div id="zeleny">Nejvyšší</div>

A nyní CSS:

div
{
    opacity: 0.8;
    width: 100px;
    height: 100px;
}

#zeleny
{
    z-index: 3;
    position: relative;
    background-color: #01EB4B;
    border: 1px solid green;
}

#modry
{
    z-index: 2;
    position: absolute;
    left: 50px;
    top: 50px;
    background-color: #4B89FF;
    border: 1px solid blue;
}

#cerveny
{
    z-index: 1;
    position: fixed;
    top: 40px;
    left: 80px;
    background-color: #FF004B;
    border: 1px solid red;
}

Jen na okraj, pojmenovat id prvku např. cerveny samozřejmě neodpovídá požadavku na moderní weby, aby vše v nich bylo sémantické, pro náš příklad je to nicméně takto názornější. Každopádně, podíváme-li se na výsledek, tak díky nastavení opacity (průhlednosti) na 0.8 pěkně vidíme, jak se prvky překrývají:

Vertical-align

Pomocí CSS3 vlastnosti vertical-align nastavujeme svislé zarovnání HTML elementu.

Pozor, vlastnost funguje pouze u in-line elementů nebo u tabulek, nelze přes ni svisle centrovat text v bloku.

Hodnoty

• délka - Posune element o danou délku nahoru oproti výchozí výšce nadřazeného elementu. Pro posun opačným směrem můžeme uvést zápornou hodnotu.
• % - Posune element dolů o danou část z výšky řádku. Opět můžeme použít zápornou hodnotu.
• baseline - Umístí element na řádek.
• sub - Umístí element na pozici dolního indexu.
• super - Umístí element na pozici horního indexu.
• top - Umístí element co nejvýše.
• text-top - Umístí element co nejvýše tak, aby se vrchol fontu dotýkal vrcholu elementu.
• middle - Vycentruje element svisle.
• bottom - Umístí obsah na dno elementu (co nejníže).
• text-bottom - Umístí obsah na dno elementu tak, aby se dna dotýkal konec fontu.
• inherit - Vlastnost vertical-align se zdědí od rodičovského elementu.

Ukázka

Ukažme si pro názornost, jak element vycentrovat na vrchol řádku:

<span id="kontejner">
    Element je zarovnaný nahoru.
    <img src="sova.png" alt="Sova" />
</span>

Nyní kód CSS:

#kontejner
{
    vertical-align: top;
    border: 1px solid blue;
}

Výsledek:

Zarovnat obsah blokového elementu můžeme malým hackem. Nastavíme mu, aby se vykresloval jako buňka tabulky pomocí vlastnosti display.

Změníme si kód CSS, zatímco HTML zůstane stejné:

#kontejner
{
    display: table-cell;
    vertical-align: middle;
    border: 1px solid blue;
    width: 100px;
    height: 250px;
}

Výsledek:

V následující lekci, Pozice prvku v CSS3, se podíváme na nastavování pozice, na níž se bude daný prvek zobrazovat. Rovněž se zaměříme na vlastnosti, kterými nastavujeme odsazení od okraje stránky pro nestaticky pozicované elementy.