Dnes je Přidat k oblíbeným
Absolutní pozicování v CSS
Syntaxe zápisu
selektor {position: absolute; left: 100px; top: 120px; z-index: 4;}Co to znamená? Co je selektor, to je jasné. Position: absolute určuje, že objekt bude absolutně pozicován. Left a top jsou vlastnosti, které určují směr a délku posunu. Top určuje posunutí objektu směrem dolů a left určuje posunutí objektu směrem 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 se dají také použít, ale znamenají něco jiného). Délku posunutí můžete zadat ve všech podporovaných CSS jednotkách.
Pozicování prakticky
Absolutní pozicování je podle mě využitelné mnohem méně než relativní (ačkoliv některé kapacity, jako Yuhů, tvrdí opak). V praxi je ale většinou třeba kombinovat oba způsoby. Ještě jednou připomenu, že absolutně pozicovaný objekt můžete ve stránce umístit naprosto kamkoliv a okolní text se přitom chová, jakoby tam žádný pozicovaný objekt nebyl, a proto se s ním může často i překrývat. Pokud třeba za sebe umístíte dva stejné znaky a jednomu zadáte absolutní pozici, pak se Vám ve stránce zobrazí úplně jinde než ten druhý.
Neúplným zápisem vlastností left a top mohou nastat tři zajímavé případy
- Pokud obě hodnoty uvedete jako nenulové, objekt se posune o příslušný počet px po stránce a bude se nejspíš překrývat s normálním obsahem.
- Pokud objektu zadáte position: absolute; left: 0; top: 0; tak levý horní roh objektu se umístí do počátku souřadného systému (horní levý roh stránky, pokud se nejedná o vnořenou pozici)
- Pokud uvedete pouze jednu ze souřadnic (vlastností left nebo top), ta neuvedená zůstane přednastaveně na auto, což znamená, že pozice bude taková, jakou by měl objekt v toku dokumentu. Například position: absolute; left: 0px posune prvek na levý okraj stránky, ale zůstane stejně vysoko,jako byl původně, protože není uvedeno top. Stejně jako neuvedení funguje nastavení hodnoty na "auto".
Překrývání objektů (z-index)
Protože při pozicování objektů často dochází k překrytí, existuje vlastnost z-index, která určuje, který objekt bude navrchu. Hodnotami z-indexu jsou celá čísla bez jednotek. Objekt, který má z-index vyšší, bude vykreslen víc nahoře. Je to vlastně třetí rozměr (souřadnice z). Z-index je přednastaven u všech objektů na 0. Pokud z-index neuvedete nebo ho budou mít dva prvky stejný, potom bude nahoře ten, který je v HTML kódu později.
<img src="../images/obrazek.gif" style="position: absolute; top: 0px; left: 0px; z-index: -1">
Vnořené pozice
Počátek souřadnicového systému pro absolutní pozicování je většinou horní levý roh stránky. Většinou znamená, že když pozicovaný prvek (absolutně i relativně) obsahuje druhý absolutně pozicovaný prvek, bude ten druhý brát počátek souřadnic podle horního levého rohu prvního prvku. To znamená, že každý absolutně či relativně pozicovaný prvek definuje svým levým horním rohem počátek souřadnicového systému pro všechny absolutně pozicované prvky, které obsahuje.
Right a bottom
CSS vlastnosti right a bottom umožňují nastavit souřadnice pravého a dolního okraje bloku od pravého a dolního okraje rodičovského bloku (okna). Nepoužívají se moc často, protože ve složitých případech to někdy dělá neplechu, ale někdy si už neporadíte jinak než třeba pomocí right: 0px; bottom: 0px.
V další kapitole se krátce mrkněte na relativní pozicování a potom už přijdou tři nejpokročilejší (a spolu s přehledem CSS vlastností taky nejdůležitější) kapitoly CSS- rozvržení (layout) stránky pomocí absolutního pozicování, relativního centrovaného pozicování a relativního pozicování "Svatý grál".