Pomocí CSS můžete umístit na libovolné místo www stránky element a přitom nebude záležet kde bude element zapsán ve zdroji www stránky.

Absolutní a relativní

Existují dva naprosto odlišné druhy pozicování

• Absolutní pozice umístí objekt do stránky na udané souřadnice bez ohledu na okolní text.
• Relativní pozice naproti tomu určuje pouze, o kolik se má objekt posunout oproti své normální poloze.

Position

Top a left

Vlastnosti, které určují směr a míru posunutí. Názvy těchto vlastností jsou poněkud nelogické, takže je potřeba si zapamatovat, že top určuje posunutí objektu směrem dolů a left doprava. Pro posouvání nahoru a doleva se nepoužívá bottom a right, nýbrž top a left se zápornými hodnotami (vlastnosti bottom a right viz níže). Velikost posunu můžete zadat ve všech jednotkách, které CSS podporuje (nejčastěji px, pt nebo cm).

Relativní poloha

Position: relative je v každém smyslu pouze posunutí. Okolní text se formátuje bez ohledu na jakoukoliv pozici objektu, to znamená, že tam, kde by posouvaný objekt měl být, zůstává prázdné místo. Při relativní poloze element není vyjmut z toku dokumentu.

Příklad relativní pozice

Absolutní poloha

Position: absolute je mnohem mocnější zbraň. Objekt s touto vlastností je možné umístit doslova kamkoliv. Přitom se okolní text chová, jako by takového objektu vůbec nebylo. (Aneb je vyjmut z toku dokumentu.) Kdybych například sem za tuto hvězdičku ** umístil absolutně pozicovanou druhou hvězdičku, vůbec se to v tomto textu neprojeví, ale zobrazí se úplně jinde.

Překrývání (z-index)

Protože při přesouvání objektů může dojít k překryvu, existuje vlastnost určující, který objekt bude navrchu. Ta vlastnost se jmenuje z-index a dosahuje hodnot celých čísel. Přitom vyšší číslo znamená vyšší pozici při překrývání. Lze si to trochu představit jako třetí rozměr (souřadnice zet). Standardně je z-index nula. Pokud není z-index uveden nebo je u obou prvků stejný, je navrchu ten prvek, který se v HTML zápisu vyskytuje později. Například

je obrázek absolutně umístěný v rohu stránky a všechen tamní text jej překrývá, protože obrázek má nastaveno z-index: -1. (Mimochodem, takto se dají tvořit “ pseudopozadí“.) Z-index se dědí do všech vnořených elementů.

Vnořené pozice

Jak bylo uvedeno, počátek souřadnicového systému pro absolutní pozicování je většinou horní levý roh stránky. Co ale znamená to většinou? Že to může být i jinak.

V případě, že pozicovaný prvek (abs. či rel.) obsahuje druhý absolutně pozicovaný prvek, bude ten druhý brát počátek souřadnic podle horního levého rohu prvního prvku. Jinými slovy každý absolutně či relativně pozicovaný prvek definuje souřadnicový systém pro všechny absolutně pozicované prvky, které obsahuje. Tato vlastnost je příjemná a dají se s ní dělat velmi psí kusy. (Naneštěstí stejně jako jiné věci chybuje v Netscape 4).

Right a bottom

CSS vlastnosti right a bottom umožňují nastavit souřadnice pravého a spodního okraje elementu od pravého a spodního okraje rodičovského elementu (nejčastěji okna). Nefungují ale ve čtyřkových prohlížečích, takže je doporučuji raději nepoužívat.

Fixed

Mozilla (tedy Firefox), Opera, Chrome a IE od verze 7 podporují zápis

ten způsobí, že objekt zůstává na stejném místě v okně, i když se se stránkou roluje. Internet Explorer 6 to neumí, pro něj se musí skriptovat fixní pozice nebo využívat bugy.