22. diel - Vykresľovanie, prekrývanie a zvislé zarovnanie prvkov v CSS3

V minulej lekcii, Pokročilejšie okraje a rámčeky v CSS 3 , sme si ukázali, ako pracovať s tvarom okrajov rámčekov a pokročilým nastavením farebného vzhľadu.

V tomto článku sa zameriame na niekoľko vlastností podstatných pre nastavenie toho, ako má byť určitý prvok na stránke zobrazovaný.

Ako prvé sa pozrieme na CSS3 vlastnosť display, pomocou ktorej je možné prehliadaču oznámiť, či má napr. vykresľovať prvok ako zarovnaný na riadku (inline), v bloku (block), ako tabuľku (table) alebo napríklad podľa rodičovského elementu, do ktorého je vnorený (teda inherit). Ďalej sa pozrieme na vlastnosť visibility čiže po slovensky " viditeľnosť ", cez ktorú možno treba nastaviť, že bude prvok skrytý (hidden), rozkladací (collapse) či jednoducho viditeľný (visible).

Následne sa presunieme k vlastnosti z-index. Tá slúži na nastavenie prekrývania prvkov, teda ktoré elementy budú viac v popredí (a teda sa budú tie v pozadí skrývať za ne) a ktoré budú naopak viac v pozadí. Dnešnú lekciu zakončíme potom vlastnosťou vertical-align, cez ktorú sa u inline elementov a tabuliek (table) nastavuje zvislé zarovnanie.

Display

Pomocou CSS3 vlastnosti display nastavujeme, akým spôsobom má byť HTML element vykresľovaný. Prehliadač vykresľuje rôzne elementy rôznym spôsobom, rozdiel je najmä v elementoch riadkových, blokových a tabuľkách. Pomocou tejto vlastnosti môžeme toto vykresľovanie ovplyvniť.

Hodnoty

- none - Element nebude vykreslený a prehliadač sa bude správať tak, ako že v stránke nie je. Bude teda presnejšie zo stránky vybratý. Ak by sme chceli element iba skryť, použijeme vlastnosť visibility, ktorou sa budeme zaoberať nižšie.

• box (alebo flexbox alebo flex) - Element sa vykreslí ako flexbox.
• block -Element sa vykreslí ako blokový. Tými sú napr. odseky alebo nadpisy. Bude sa rozťahovať na najvyššiu možnú šírku a elementy sa budú radiť pod seba.
• inline -Element sa vykreslí ako riadkový. Riadkové elementy sa vkladajú vedľa seba (na riadok) a výška riadku je určená podľa najvyššieho elementu na riadku. Riadkovým elementom je napr. <span>.
• inline-block - Element je vložený na riadok, ale chová sa ako blok.
• inline-flex - Element je vykreslený ako riadkový flexbox.
• inline-table - Element je vykreslený ako riadková tabuľka.
• list-item - Element je vykreslený ako položka zoznamu.
• table -Element je vykreslený ako tabuľka.
• table-caption - Element je vykreslený ako nadpis tabuľky.
• table-cell - Element je vykreslený ako bunka tabuľky. Toto správanie sa používa najmä kvôli zvislému centrovaniu, pretože v tabuľkách funguje vlastnosť vertical-align, na ktorú sa pozrieme nižšie.
• table-column - Element je vykreslený ako stĺpec tabuľky.
• table-column-group - Element je vykreslený ako skupina stĺpcov (<colgroup>).
• table-footer-group - Element je vykreslený ako skupina pätičiek tabuľky.
• table-header-group - Element je vykreslený ako skupina hlavičiek tabuľky.
• table-row - Element je vykreslený ako riadok tabuľky.
• table-row-group - Element je vykreslený ako skupina riadkov tabuľky.
• inherit - Vlastnosť display bude zdedená od rodičovského elementu.

Ukážka

Skúsme si ten istý element vykresliť rôznymi spôsobmi, aby sme si ukázali rozdiely medzi jednotlivými hodnotami.

Vložme si vedľa seba niekoľko elementov, napr. spanů. Predvolená hodnota vlastnosti display pre <span> je inline. Najprv CSS3 kód:

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

Teraz kód v HTML:

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

Pozrime sa na výsledok:

Skúsme pre zmenu elementom nastaviť display na hodnotu block (HTML zostáva rovnaké):

display: block;

A výsledok:

Blokové elementy sa rozťahujú do šírky a radia sa preto pod seba. Teraz skúsme tabuľku (HTML stále zostáva nezmenené):

display: table;

Výsledok:

Visibility

Pomocou CSS3 vlastnosti visibility môžeme skryť HTML element. Skrytý element nie je vykresľovaný, ale je v stránke prítomný a je namiesto neho vykreslené prázdne miesto. Pre úplné vybratie elementu zo stránky použite vlastnosť display.

Hodnoty

- visible (predvolené) - Element je vykresľovaný.

• hidden -Element nie je vykresľovaný a je skrytý. Je však na stránke stále prítomný a namiesto neho je vykresľované prázdne miesto.
• collapse - Vlastnosť slúži iba pre tabuľkové elementy, po ich skrytí nie je narušené rozloženie tabuľky.
• inherit - Vlastnosť visibility bude zdedená od rodičovského elementu.

Ukážka

Napíšme si najskôr HTML kód a jednému z odsekov dajme id kontajner:

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

Teraz pridáme CSS kód, kde k id kontajneru priradíme visibility s hodnotou hidden:

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

#kontejner
{
    visibility: hidden;
}

Vo výsledku vidíme, že prostredný odsek nevidíme:

Z-index

Pomocou CSS3 vlastnosti z-index nastavujeme hĺbku (z-súradnicu) HTML elementu na stránke. Pokiaľ sa viac elementov prekrýva, môžeme pomocou tejto vlastnosti nastaviť poradie, v akom sa majú vykresľovať. Inými slovami: ktoré budú vpredu a ktoré vzadu. Vlastnosť funguje iba pre pozicované elementy, teda s position: absolute, fixed a relative.

Hodnoty

- auto (predvolené) - Poradie vykresľovania prvkov je založené na rodičovskom elemente.

• číslo - Číslo, určujúce poradie, V ktorom sa má element vykresliť. Čím vyššie číslo, tým je element vyššie.
• inherit - Vlastnosť z-index bude zdedená od rodičovského elementu.

Ukážka

Majme kód HTML so zadanými id u kontajnerov:

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

A teraz 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;
}

Len na okraj, pomenovať id prvku napr. cerveny samozrejme nezodpovedá požiadavke na moderné weby, aby všetko v nich bolo sémantické, pre náš príklad je to však takto názornejšie. Každopádne, ak sa pozrieme na výsledok, tak vďaka nastaveniu opacity (priehľadnosti) na 0.8 pekne vidíme, ako sa prvky prekrývajú:

Vertical-align

Pomocou CSS3 vlastnosti vertical-align nastavujeme zvislé zarovnanie HTML elementu.

Pozor, vlastnosť funguje iba pri in-line elementoch alebo pri tabulkách, nemožno cez ňu zvisle centrovať text v bloku.

Hodnoty

- délka - Posunie element o danú dĺžku dole. Pre posun opačným smerom môžeme uviesť zápornú hodnotu.

• % - Posunie element dole o danú časť z výšky riadku. Opäť môžeme použiť zápornú hodnotu.
• baseline - Umiestni element na riadok.
• sub - Umiestni element na pozíciu dolného indexu.
• super - Umiestni element na pozíciu horného indexu.
• top - Umiestni element čo najvyššie.
• text-top - Umiestni element čo najvyššie tak, aby sa vrchol fontu dotýkal vrcholu elementu.
• middle - Vycentruje element zvisle.
• bottom - Umiestni obsah na dno elementu (čo najnižšie).
• text-bottom - Umiestni obsah na dno elementu tak, aby sa dna dotýkal koniec fontu.
• inherit - Vlastnosť vertical-align sa zdedí od rodičovského elementu.

Ukážka

Ukážme si pre názornosť, ako element vycentrovať na vrchol riadku:

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

Teraz kód CSS:

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

Výsledok:

Zarovnať obsah blokového elementu môžeme malým hackom. Nastavíme mu, aby sa vykresľoval ako bunka tabuľky pomocou vlastnosti display.

Zmeníme si kód CSS, zatiaľ čo HTML zostane rovnaké:

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

Výsledok:

V budúcej lekcii, Plávajúce obsah v CSS 3 , sa pozrieme na nastavenie plávajúceho obsahu, teda takého, ktorý je vynechaný iným obsahom, a na to, ako urobiť oblasť, v ktorej je obtekanie obmedzené.