Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

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:

Display: inline
index.html

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

display: block;

A výsledek:

Display: block
index.html

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:

Display: table
index.html

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:

Visibility: hidden
index.html

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í:

Z-index
index.html

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:

Vertical-align: top
index.html

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:

Vertical-align: top
index.html

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.


 

Předchozí článek
Rozměry prvků v CSS3
Všechny články v sekci
Základy CSS3
Přeskočit článek
(nedoporučujeme)
Pozice prvku v CSS3
Článek pro vás napsal Jakub Raida
Avatar
Uživatelské hodnocení:
31 hlasů
Autor má rád literaturu, dějiny, filmy, počítačové hry, paleontologii, vesmír a programování.
Aktivity

 

 

Komentáře

Avatar
Daniel Horák:11. ledna 10:35

Ve výčtu hodnot vlastnosti display jsem nenašel flex. Je tam místo toho uvedeno box, ale to mi v chromu nefunguje. Ani online editor na w3schools.com to nebere.

 
Odpovědět
11. ledna 10:35
Avatar
Daniel Horák:11. ledna 20:51

Popis vlastnosti vertical-align tady nedává moc smysl. Je určena k zarovnání elementu v rámci řádkového prvku (ne blokového, to je tu uvedeno správně). Tedy styluje se konkrétní element a ne celý "kontejner".

Když si zkusím html:

<p>Jak se zarovná tento <span class="zarovnat-svisle">element</span> a co sova <img src="sova.png" class="zarovnat-svisle"></img>?</p>

a css:

.zarovnat-svisle {
    vertical-align: 50%;
}

Tak element i obrázek sovy levitují od poloviny řádku nahoru.

Posune element o danou délku dolů

tedy rozhodně neplatí, právě naopak.

 
Odpovědět
11. ledna 20:51
Avatar
Jakub Raida
Supertvůrce
Avatar
Jakub Raida:12. ledna 11:20

Díky na připomínky, event. na to mrknu a opravím.

 
Odpovědět
12. ledna 11:20
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 3 zpráv z 3.