Srovnání absolutního a relativního umísťování
V následujích příkladech se postupně aplikují další CSS pravidla na druhý, červený odstavec.
Všechny tři ukázkové odstavce (přesněji univerzální blokové elementy DIV) jsou pro potřeby výkladu
zanořeny do DIVu, který má nastaveno CSS pravidlo position: relative;, takže všechny další
„hrátky“ s absolutním CSS pozicováním uvnitř něj se odehrávají pouze v jeho rámci (jinak by probíhaly vůči
příslušnému nadřazenému pozicovanému elementu, kterým je v základním stavu element BODY).
Porovnejte důkladně, jak se mezi sebou liší následující příklady
(konkrétně jejich druhé varianty s pravidlem top: 20px;).
0.
V základním nastavení vykresluje prohlížeč elementy ve stránce za sebou tak, jak na ně narazí ve zdrojovém HTML souboru.
Navíc je jim postupně přiřazována zvyšující se z-tová souřadnice (BODY má tuto souřadnici rovnu 0).
text v odstavci před pozicovaným
text v odstavci před pozicovaným
text v pozicovaném odstavci
text v odstavci za pozicovaným
text v odstavci za pozicovaným
1a) relativní
S elementem, kterému nastavíme position: relative;, se zdánlivě nic nestane (porovnejte s předchozím příkladem).
Ve skutečnosti se mu zvětší z-ová souřadnice nad všechny ostatní a na aktuální pozici
(na které je zobrazen při základním vykreslování) se mu přiřadí nová, relativní soustava souřadnic
(svázaná s levým horním rohem tohoto elementu v jeho základním vykreslení)...
#pozicovan {
position: relative;
}
text v odstavci před pozicovaným
text v odstavci před pozicovaným
text v pozicovaném odstavci
text v odstavci za pozicovaným
text v odstavci za pozicovaným
...posun vůči níž se projeví až po aplikaci nějakého dalšího pozičního pravidla:
#pozicovan {
position: relative;
top: 20px;
}
text v odstavci před pozicovaným
text v odstavci před pozicovaným
text v pozicovaném odstavci
text v odstavci za pozicovaným
text v odstavci za pozicovaným
1b) absolutní
Naproti tomu element, kterému nastavíme position: absolute;, je automaticky vyjmut z posloupnosti elementů ve stránce.
Na výstupu se to projeví tak, že elementy následující po něm zaujmou jeho místo v základním vykreslování.
Přitom samotný takto zapozicovaný element zůstane jakoby na svém původním místě, pouze se přesune nad všechny ostatní
elementy ve stránce (jeho z-souřadnice je zvýšena nad všechny ostatní dosud zavedené).
Navíc se „smrskne“ na šířku a místo základního místa od kraje ke kraji zabírá pouze tolik, kolik jeho obsah skutečně potřebuje.
#pozicovan {
position: absolute;
}
text v odstavci před pozicovaným
text v odstavci před pozicovaným
text v pozicovaném odstavci
text v odstavci za pozicovaným
text v odstavci za pozicovaným
Aplikace dalšího pozičního pravidla pak udělá ale něco úplně jiného, než v případě relative -
místo posunu relativně vůči aktuální pozici (dané soustavou souřadnic svázanou s levým horním rohem
červeného DIVu v základním vykreslení) se posune absolutně vůči soustavě souřadnic
dané levým horním rohem nadřazeného pozicovaného elementu (tj. „obalového“ DIVu):
#pozicovan {
position: absolute;
top: 20px;
}
text v odstavci před pozicovaným
text v odstavci před pozicovaným
text v pozicovaném odstavci
text v odstavci za pozicovaným
text v odstavci za pozicovaným