Rozmiestnenie elementov na stránke 2 (position)

Táto kapitola je pokračovaním predchádzajúcej kapitoly. Správanie spomenuté na záver predošlej kapitoly, ukladanie kociek lega za sebou zľava doprava a od hora dole, kde každý element zaberá svoje miesto svojim rozmerom a každý ďalší element sa musí umiestniť do voľného priestoru, určuje vlastnosť position (pozícia) s hodnotou static (statická). Vlastnosť position predstavuje ukladanie kociek, resp. typ umiestnenia (stavania do správnej polohy) elementov. Každý element má defaultne nastavenú vlastnosť na hodnotu static, ktorá predstavuje štandardné správanie umiestnenia, s ktorým sa stretávame od začiatku a nemá žiadne iné sprievodné vlastnosti, ktoré by ju ovplyvňovali. Úplne odlišné správanie má hodnota pozície fixed (pevne daná). Toto pravidlo zapríčiní, že daný element bude na pevne danej pozícii. Pevne daná pozícia sa špecifikuje pomocou vlastností, ktoré predstavujú súradnice daného elementu.

Pri tomto pravidle si treba ešte vysvetliť dve dôležité skutočnosti. Prvá je, že daný element s týmto pravidlom nezaberá v našom doterajšom chápaní miesto/priestor na stránke. Predstavte si to ako našu krabicu, na ktorú sa pozeráme zhore cez jej otvor, do ktorej ukladáme kocky lega. Na spodku krabice máme prvú priesvitnú fóliu, na ktorej ukladáme kocky lega pomocou hodnoty static. Táto fólia s kockami lega tvorí akokeby prvú vrstvu/poschodie našej stránky. Na tieto kocky položíme druhú priesvitnú fóliu, ktorá predstavuje druhé poschodie. Táto druhá vrstva je prázdna, ale vidno cez ňu všetky elementy, ktoré boli v prvej. Na túto vrstvu sa umiestňujú elementy s hodnotou fixed. Takže ak si zadáme element s pevne danou pozíciou, napríklad bude umiestnený v ľavom hornom rohu, náš element bude nad našimi pôvodnými – s hodnotou static. Bude vidno všetky vrstvy, ale fixed elementy budú nad našou pôvodnou vrstvou. Druhá dôležitá skutočnosť je správne pochopenie pozície fixed pri scrollovaní. Predstavme si našu krabicu, že by mala rozmer 2000 pixelov na výšku a je plná elementov static a je v nej aj vyššie spomenutý element fixed. Priestor, v ktorom sa zobrazuje stránka v okne prehliadača na našom monitore má povedzme na výšku 800 pixelov. Priestor, v ktorom sa zobrazuje stránka v okne prehliadača, si môžeme predstaviť ako dosku s oknom/výrezom, ktorý má veľkosť tejto plochy. Na začiatku je táto doska položená na našej krabici na vrchu, takže cez ňu vidíme len daný rozmer (šírka a na výšku 800 pixelov). Ak chceme vidieť aj elementy, ktoré sú nižšie, musíme stránku scrollnuť nižšie. V našej predstave to znamená posunutie dosky s výrezom nižšie po vrchu našej krabice, takže uvidíme aj elementy na nižších pozíciach, čiže v spodnej časti stránky. Tu ale nastáva dôležitý fakt, že druhá fólia, na ktorej sú elementy fixed, sa posúva spolu s našou doskou s výrezom.

Čo to znamená? Predstavme si, že máme v našom prápade element static, ktorý je ako prvý na stránke v ľavom hornom rohu a na rovnakej pozícii máme element fixed (na druhom poschodí). Scrollneme stránku nižšie, takže náš element z prvého poschodia (vrstvy) s pozíciou static už nevidíme. Náš element fized ale stále vidíme v ľavom hornom rohu, pretože daná pozícia v súradniciach neznamená pozíciu na stránke (od 1 po 2000 pixelov ako static), ale pozíciu v práve zobrazovanom priestore prehliadača, čiže tú časť stránky, ktorú vidíme, čiže v našom prípade ten výrez dosky, cez ktorý sa pozeráme na stránku (na obsah krabice zhora). Hádam ste toto prirovnanie pochopili, ak nie, pochopíte to nasledujúcej ukážke. Ako sme na začiatku spomenuli, pozícia sa špecifikuje pomocou vlastností pre súradnice elementu. Súradnice sa zadávajú zadefinovania počtu pixelov od vrchu stránky (top) alebo spodku (bottom) a od ľavého okraja (left) alebo pravého okraja (right). Každá zadaná vlastnosť pre pozíciu určuje aj bod elementu, na ktorý sa súradnice vzťahujú. Ak je zadaná pozícia v top left, predstavuje to pozíciu pre ľavý horný roh elementu. Ak je bottom left, predstavuje to ľavý spodný okraj elementu a pod. Pozícia je teda jednoznačne určená dvomi vlastnosťami, top/bottom a left/right:

<!DOCTYPE html>
<html>
    <body>

        <h2>Tento nadpis je na prvej vrstve, pretoze je static</h2>
        <div style="background: grey; height: 400px;">Div 1 static</div>
        <div style="background: white; border: 3px solid red; width: 100px; height: 50px; position: fixed;">Div 1 fixed bez suradnic</div>
        <div style="background: yellow; height: 500px;">Div 2 static</div>
        <div style="background: grey; height: 500px;">Div 3 static</div>
        <div style="border: 3px solid red; width: 100px; height: 50px; position: fixed; top: 0px; right: 0px;">Div 2 fixed</div>
        <div style="border: 3px solid red; width: 100px; height: 50px; position: fixed; bottom: 20px; left: 10px;">Div 3 fixed</div>

    </body>
</html>

Poďme sa pozrieť na našu ukážku. Všetky elementy, ktoré nemajú zadanú vlastnosť position na hodnotu fixed, sú defaultne static, takže sa nachádzajú na našej prvej vsrtve, čiže na spodku. Sú uložené pekne zaradom a každý z nich zaberá svoje miesto. Použili sme naschvál vysoké divy, aby zaberali na výšku väčší priestor, aby bolo nutné scrollovať a vidieť správanie hodnoty fixed. Pozrime sa lepšie iba na divy, ktoré majú nastavenú pozíciu na pevne danú (fixed). Prvý div s touto hodnotou nemá zadanú pozíciu – súradnice pomocou vlastností top/bottom/left/right. Jeho súradnice sú teda určené poradím v kóde, čiže za posledným static elementom pred ním (Div 1 static). Nachádza sa tam, kde končí (spodný okraj) pred ním posledný element. Všimnite si, že tento div má nastavené pozadie na bielu farbu, takže nevidno, čo je za ním, resp. pod ním (na prvej vrstve – static element), zakrýva text druhého static divu. Ak stránku scrollneme, tento div je stále na svojej pozícii, pretože fixed značí pozíciu v zobrazovanej časti a nie na stránke (diera v doske cez ktorú sa pozerám na krabicu). Druhý fixed div má zadanú pozíciu v pravom hornom rohu. Nemá zadané pozadie, takže je cez neho vidieť obsah spodného divu, akokeby cez fóliu druhej vrstvy vidíme na element prvej vrstvy. Samozrejme pri scrollovaní ostáva na svojej pozícii. Tretí fixed div sa zase nachádza 10 pixelov od ľavého kraja a 20 od spodného okraja. Zamyslite sa, že ak máme zadanú pozíciu pri fixed elementoch, je jedno, kde sa nachádzajú v kóde, pretože to ich zobrazenie neovplyvňuje. Súradnie majú pevne dané, takže nezáleží na tom, za akým elementom idú a zobrazujú sa do druhej – vrchnej vrstvy, takže je jedno, kde sú v kóde. Skúste si tieto elementy v kóde premiestniť a uvidíte, že zobrazenie bude rovnaké.

Ďaľšia hodnota vlastnosti position, ktorú si predstavíme, je relative (relatívna). Táto hodnota je v podstate to isté ako static s tým rozdielom, že je možné zadať vzdialenosť a smer, ktorým sa má element vytýčiť od svojej pôvodnej pozície (určujeme offset – ofset, odstup, odchýlka od pôvodného umiestnenia). Tým vlastne zadáme jeho relatívnu pozíciu k jeho normálnej pozícii (tam, kde by mal byť). Ak má element toto pravidlo, jeho vplyv na ostatné elementy však ostáva z pôvodného miesta, relatívne sa len zobrazuje, ovplyvňuje pôvodnou pozíciou. To znamená, že ak za ním pôjde ďalší element, umiestni sa za miesto, kde by mal byť relatívny element pôvodne. Asi je to ťažké na pochopenie z textu, poďme si to ukázať prakticky a rozoberieme si následne ukážku:

<!DOCTYPE html>
<html>
    <body>

        <div style="border: 1px solid; margin-bottom: 20px;">Div 1 static</div>
        <div style="border: 1px solid; position: relative; margin-bottom: 20px;">Div 2 relative bez suradnic</div>
        <div style="border: 1px solid; position: relative; left: 20px; margin-bottom: 20px;">Div 3 relative s nastavenym offsetom - s posunutim od povodnej pozicie</div>
        <div style="border: 1px solid; position: relative; right: 20px; margin-bottom: 20px;">Div 4 relative s nastavenym offsetom - s posunutim od povodnej pozicie</div>
        <h2>Ukazka vplyvu na ostatne elementy</h2>
        <span style="border: 1px solid;">Span 1</span>
        <span style="border: 1px solid; position: relative; left: 20px;">Span 2</span>
        <span style="border: 1px solid;">Span 3</span>
        <span style="border: 1px solid; position: relative; left: 20px;">Span 4</span>
        <span style="border: 1px solid; position: relative; left: 20px;">Span 5</span>
        <span style="border: 1px solid;">Span 6</span>
    </body>
</html>

Prvý static div sa zobrazuje štandardne, podobne ako aj druhý, ktorý má zadanú pozíciu relative. Nemá ale zadaný offset, takže sa správa/zobrazuje rovnako, ako keby bol static. Tretiemu divu sme zadali posun (offset) od ľavého okraja 20 pixelov. To zapríčinilo, že sa tento div od svojej pôvodnej pozície, akú by mal mať (tak ako prvý a druhý div), posunul o 20 pixelov smerom doprava (od ľavého okraja von). Všimnite si, že to zapríčinilo aj rozšírenie celej webstránky, je možné ju scrollovať horizontálne, pretože šírka divu je taká istá, ako je šírka pôvodného okna. Je ale posunutý, takže sa šírka celej stránky posunula, pretože div má svoj rozmer a ten priestor aj zaberá. Štvrtý div sme zase posunuli opačným smerom doľava, aby ste videli, čo sa stane. Keďže všetko okolo zobrazovania na počítači sa riadi smerom od ľavého horného rohu smerom dole a doprava, tento prípad nezapríčiní roztiahnutie okna, aby sme div videli. To by sa potom museli posunúť aj všetky ostatné a to by zapríčinilo zmenu ich pozície (x-ová súradnica). Musia predsa byť od ľavého okraja, takže časť divu je skrytá/neviditeľná.

Ďalej sme použili niekoľko span elementov, aby sme pochopili vplyv relatívne umiestnených elementov na ostatné, resp. ich správanie pri ostatýnch elementoch. Prvý span s defaultnými nastaveniami sa zobrazuje štandardne. Druhý relatívny span sme posunuli o 20 pixelov smerom doprava, takže na mieste, kde mal byť, vznikla 20 pixelová diera (prázdny priestor). Tretí span má defaultné nastavenia, takže sa nachádza na mieste, kde by mal pôvodne končiť druhý span. Všimnite si, že to tak aj je, ale keďže sme druhý span posunuli doprava o 20 pixelov, tých 20 pixelov na pravej strane sa prekrýva s tretím spanom, ktorý je na svojom statickom mieste. Podobne sme to spravili aj s ďalšími spanmi, štvrtý a piaty sme oba posunuli. Keďže sú oba posunuté zo svojej statickej pozície, neprekrývajú sa. Posledný šiesty span je statický, takže sa prekrýva s piatym. Všimnite si ale, že sa zase prekrýva iba o tých 20 pixelov.

Poslednú hodnotu vlastnosti position, ktorú si teraz vysvetlíme, sme si schválne nechali nakoniec, pretože je troška zložitejšia ako predchádzajúce. Predchádzajúce hodnoty mali jednoznačné správanie a neboli ovplyvnené tým, v akom elemente sa nachádzajú alebo aký je vedľa nich element (na rovnakej úrovni) a podobne. Správanie elementu s touto hodnotou je však závislé na ostatných elementoch. Názov poslednej hodnoty pozície je absolute (absolútna). Element s touto pozíciou je relatívne umiestnený k najbližšiemu predchodcovi (ancestor – predchodca), ktorý má zadanú pozíciu (čiže iné od static – relative/fixed/absolute). Predchodcom sa myslí jeden z rodičovských elementov pred ním (k predchodcovi) v štruktúre kódu (v hierarchii elementov). Rodič je jeden z elementov, v ktorom je daný element obalený, je jeho vnútrom alebo vúntrom iného elementu, ktorý je vnútrom spomenutého predchodcu. Ak však takýto element nie je, vzťahuje sa jeho relatívna pozícia vzhľadom k celej webstránke (body), čo je najvyšší predchodca. Čo to v praxi znamená? Že ak sa nejaký element s hodnotou absolute nachádza v kóde, v ktorom pred ním nie je žiadny rodičovský element so zadanou pozíciou (s inou hodnotou vlastnosti position ako static), umiestni sa relatívne k elementu body (relatívne sa myslí zadaním pozície – top/bottom/right/left). V tomto prípade sa jeho umiestnenie správa podobne ako pri hodnote fixed s tým rozdielom, že sa aj scrolluje, čiže jeho pozícia je zadaná vzhľadom k webstránke (body) a nie k zobrazovanej ploche. Je ale na druhej vrstve podobne ako fixed, čiže nad elementami static, takže ani nezaberá miesto na stránke - na danej vrstve na úrovni static a relative elementov. Ak sa však v kóde nachádza predchodca, jeho zadaná pozícia (súradnice, resp. odskok od zadanej strany v pixeloch) sa viaže na ten element s pozíciou, čiže pozícia (odskok) sa bude rátať od pocície tohto elementu. Poďme si to ale názorne ukázať a potom si to vyvsetlíme:

<!DOCTYPE html>
<html>
    <body>

        <div style="border: 4px solid; height: 200px; margin-bottom: 20px;">Div 1 static</div>

        <div style="border: 4px solid blue; height: 200px; margin-bottom: 20px; position: relative;">Div 2 relative</div>

        <div style="border: 4px solid red; width: 100px; height: 100px; position: absolute; left: 20px; top: 20px;">Div 3 absolute</div>

        <div style="border: 4px solid; height: 400px; margin-bottom: 20px; padding: 20px;">
            <h3>Div 4 static</h3>

            <div style="border: 4px solid blue; height: 200px; position: relative; padding: 20px;">
                <h3>Div 5 relative</h3>

                <div style="border: 4px solid red; height: 100px; position: absolute; left: 0px; top: 0px;">Div 6 absolute</div>
            </div>

        </div>

        <div style="border: 4px solid blue; height: 100px; width: 200px; margin-bottom: 20px; position: fixed; top: 30px; right: 30px;">Div 7 fixed
            <div style="border: 4px solid red; height: 50px; position: absolute; bottom: 2px; right: 2px;">Div 8 absolute</div>
        </div>

    </body>
</html>

V ukážke sú pre lepšie pochopenie divy očíslované zaradom, ako idú v kóde, static divy majú čierne orámovanie, divy s pozíciou majú farebné orámovanie, tie relatívne majú orámovanie červenou farbou. Na začiatku máme štandardný static div, za ktorým nasleduje div so zadanou pozíciou (div 2 – relative). Tretí div však už má pozíciu absolute. Hľadá sa teda jeho predchodca, čiže nadradený element, ktorý má zadaná pozíciu. Takýto element neexistuje, pretože tento div nie je obsahom žiadneho elementu, takže sa jeho pozícia viaže k elementu body, čo predstavuje celú stránku. Preto sa zobrazuje úplne hore v ľavom rohu, ako keby bol fixed, rozdiel je ten, že sa aj scrolluje, čiže jeho pozícia sa viaže na stránku a nie zobrazenú plochu (tá nača doska s otvorom nad krabicou).

Ďalej nasleduje štvrtý static div, ktorý v sebe obsahuje div, ktorý má nastavenú pozíciu na relative. Vo vnútri tohto divu sa nachádza šiesty div, ktorý má absolútnu pozíciu. Je teda umiestnený k najbližšiemu predchodcovi, ktorý má zadanú pozíciu. V tomto prípade to je náš div číslo 5. Všimnite si aj, že tento div (div 5) má zadanú vlastnosť padding, na pozíciu absolutne elementu sa to však nevzťahuje, šiesty div je rovno nalepený v ľavom hornom rohu divu číslo 5.

Siedmy div má pevne danú pozíciu a obsahuje v sebe absolútny div. Ten je teda umiestnený v jeho vnútri, pretože je jeho najbližším predchodcom so zadanou pozíciou. Toto je základné správanie absolútnej pozície elementov za rôznych okolností. Prebrali sme si teda druhú základnú vlastnosť jazyka CSS (po display), ktorá ovplyvňuje rozmiestnenie elementov na stránke. Ešte neskôr si preberieme nejaké vlastnosti a nastavenia, ktoré ovplyvňujú rozmiestnenie, tieto dve sú však najdôležitejšie.