Základy absolutního umísťování elementů
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 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.
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
1.
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
2.
O tom se snadno přesvědčíme „přesunutím“ takto zapozicového elementu pod ostatní...
#pozicovan {
position: absolute;
z-index: -1;
}
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
...a následným „odšoupnutím“ původně třetího odstavce kousek dolů:
#po {
margin-top: 10px;
}
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
POZOR: „Hraní si“ se z-indexy nezabere v tomto případě jak v IE 5+6, tak ani ve Firefox 1.0!
Ve Firefoxu je chyba, ignoruje všechny záporné indexy, a IEčko sice z-index podporuje, ale tak nějak případ od případu...
Nejlepší je koukat na tuhle stránku Operou, v ní je jasné, co asi chtělo W3C specifikací CSS říct :)
3.
Absolutně umístěný element můžeme nyní v rámci nadřazeného elementu libovolně šoupat.
Jakmile „sáhneme“ na jeho umístění v nějakém směru, „zapomene“ místo, na kterém stál, a nastaví se
v rámci příslušného nadřazeného elementu. A to buď vůči levému hornímu rohu tohoto nadřazeného elementu...
#pozicovan {
position: absolute;
left: 30px;
}
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
#pozicovan {
position: absolute;
left: 30px;
top: 2px;
}
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
...nebo vůči jeho pravému spodnímu rohu (což zase jednou beznadějně selže v IE 5+6):
#pozicovan {
position: absolute;
bottom: 5px;
right: 66px;
}
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