Position
CSS vlastnost position určuje způsob počítání polohy prvku.
| hodnoty | způsob výpočtu umístění |
|---|---|
| absolute | prvek bude vyjmut z toku dokumentu a umístěn na určitých souřadnicích |
| relative | prvek bude posunut ze svého normálního umístění |
| static | prvek je umístěn normálně v dokumentu |
| fixed | prvek je umístěn absolutně vzhledem k oknu |
| sticky | kombinace relative a static, prvek se při rolování drží pozice, dokud je vidět jeho rodič |
Výchozí hodnota static znamená pouze to, že se s prvkem pracuje normálně. Jiné hodnoty způsobují umístění dané souřadnicemi. Souřadnice se udávají pomocí CSS vlasností left a top (popřípadě right a bottom).
Position: absolute
- vyjme prvek z dokumentu, takže zbytek stránky jím není ovlivněn
- dovoluje prvek umístit přesně na souřadnice. Souřadnice se počítají od začátku tzv. omezujícího bloku.
Omezující blok je normálně celá stránka (tag body). Dají se ale vytvořit nové omezující bloky -- tak, že se jim nastaví position: absolute nebo position: relative (vizte příklad zanořené pozice).
Position: relative je dobrá na tři věci:
- posunutí prvku trochu jinam pomocí top a left
- vytvoření nového omezujícího bloku (i když se neposunou), počátku souřadnic
- nastavení position: relative některým prvkům odstraňuje vykreslovací chyby Internet Exploreru
Relativně pozicované prvky zůstávají v dokumentu a ostatní prvky ovlivňují, protože tam, kde by měly být původně, se udělá volné místo.
Pokud používáte nějaký prvek s position: relative jako omezující blok, důrazně doporučuji nastavit takovému prvku výšku nebo šířku, protože jinak se zanořené prvky chovají v Internet Explorerech nepředvídatelně.
Position: fixed se chová podobně jako position: absolute, ale:
- pokud se dokumentem roluje, drží se prvek v okně na místě
- omezujícím blokem, od kterého se počítá pozice prvku, je vždy okno prohlížeče (tedy nikoli nejbližší pozicovaný předek)
Position: sticky se chová jako kombinace relativní a fixní pozice.
- dokud rodičovský prvek není vidět, chová se jako position: relative,
- pokud je vidět rodičovský prvek, sticky se drží na displeji na místě, jako kdyby měl position: fixed
- když při rolování stránky rodičovský prvek odjede, odjíždí s ním i sticky prvek.
Rodičovský prvek nemusí mít position: relative. Vedle sticky musí být ale zadána vlastnot top. Klidně i s nulovou hodnotou top: 0px;. Vlastnost top a left fungují pro posouvání o pixely od normální pozice (tedy podobně jako relative), což ale myslím není moc užitečné. Důležitější je, že přítomnost top způsobí, že to vůbec funguje.
Position: sticky by se dalo použít například pro nadpisy, při pečlivém uzavírání kapitol do <div>ů. Očekávám velké použití v reklamách. Position: sticky nepodporuje Internet Explorer. Některé prohlížeče neumějí positon: sticky u tabulkových prvků, což se typicky hodí pro záhlaví. To podle mě tolik nevadí, prvek v nich prostě při rolování normálně odjede. Chrome a Edge neumí nastavit position: sticky na řádek tabulky. To řeším tak, že nastavím position: sticky pro buňky záhlaví (<th>), ne pro řádek (<tr>). Příklady na position: sticky
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Edge | všechny verze | sticky od verze 16 |
| Mozilla (Firefox) | všechny verze | sticky neumí pro tabulkové prvky |
| Safari | všechny verze | sticky se musí zadávat s prefixem -webkit-sticky |
| Chrome | všechny verze |
Pokud chcete používat hodnotu s prefixem -webkit-sticky, uveďte ji dříve než hodnotu sticky. Domnívám se, že v roce 2017 už začne Safari podporovat i hodnotu bez prefixu.
Příklady
Relativní pozice
Jednoduché posunutí kousku textu relativní pozicí o 4 pixely nahoru:
Normální text a <span style="position: relative; top: -4px">posunutý text</span> a zase normální text.
Absolutní pozice
Užitečnější je absolutní pozice. Příklad zobrazení loga v levém horním rohu dokumentu, ať už je v html kdekoliv.
<style>
.logo {position: absolute; left: 1px; top: 1px}
</style>
Předchozí html text stránky (logo nemusí být první)
<div class="logo">
<a href="index.html">
<img src="logo.gif" style="width: 96px; height: 64px"></a>
</div>
Pomocí absolutní pozice se dá udělat design celé stránky: Příklad na left a position.
Zanořená pozice
V normálním případě se umístění pozicovaného prvku počítá od horního levého rohu dokumentu. Dá se ale nastavit, že se bude počítat od jiného prvku. Tomu jinému prvku se říká myslím omezující blok. Jde o nadřazený prvek, který má nastavenu position absolute nebo relative.
Dejme tomu, že budu chtít mít blok textu (div) a v něm malý text (tag span) vždy v pravém horním rohu odstavce. Představte si ten malý textík třeba jako datum. HTML zápis vypadá takto:
<div class="omezujici">
Nornální text bla bla bla a
<span class="datum">
17. listopadu 2003
</span>
a nějaký další text.
</div>
Styl, který zařídí, že datum bude v textu vpravo nahoře:
<style>
.omezujici {position: relative}
.datum {position: absolute; top: 0px; right: 0px}
</style>
Podstatné je, že umístění data se vztahuje k okolnímu textu bez ohledu na to, kde je ve stránce umístěný. Zobrazit tento příklad na zanořenou pozici.
Kombinace posunutí
Často je potřeba mít pozicovaný prvek (např. banner) horizontálně přesně na středu stránky (střed na střed). Když se napíše left: 50%, tak se do středu stránky dostane levý okraj prvku. Pokud znám šířku toho prvku, dá se to dělat kombinací absolutní a relativní pozice:
<div style="position: absolute; left: 50%; width: 468px">
<div style="position: relative; left: -234px">
vlastní prvek (třeba banner)
</div>
</div>
Vnější div se umístí na střed stránky a vnitřní div to vrátí kousek doleva. Dá se to ale napsat jednodušeji jen jedním divem:
<div style="position: absolute; left: 50%; width: 468px;
margin-left: -234px">
vlastní prvek (třeba banner)
</div>
Využívám toho, že margin se vyhodnocuje podobně jako relativní pozice a že se jednomu rozměru marginu mohou zadat záporné hodnoty.
Zobrazit tyto příklady: Vystředění prvku pomocí absolutní pozice.
Ukotvený horní řádek tabulky
Bug Chrome a podobných prohlížečů způsobuje, že se position: sticky musí nastavit pro th. Pro thead nebo pro tr by to nefungovalo.
<style>
th {position: sticky; top: 0px; background-color: white; color: black;}
</style>
<table>
<tr><th>řádek záhlaví,</th><th>který zůstane na místě</th></tr>
<tr><td>normální buňky</td><td>...</td></tr>
....
</table>
Další příklady
Centrovaný CSS pozicovaný design využívá toho, že vycentrovaný blok má nastavenou relativní pozici, takže vnořené prvky od něj počítají pozici.
Příklad sloupcového designu pozicováním
Neklikací odkaz v IE 6 strict (float + záporný margin) se řeší nastavením relativní pozice.
Layout pomocí pozicování a overflow
Ukázka absolutního pozicování a filtru matrix
CSS pozicování, primitivní příklad
Bug absolutního pozicování s marginem v Internet Exploreru
Anchor positioning
V budoucnu (odhad 2025) bude možné umisťovat prvky absolutně ne pouze k jejich rodiči, ale k libovolnému prvku na stránce. Pokud něco takového potřebujete, prostudujte si specifikace anchor positioning a navrhované vlastnosti anchor-name, pisition-anchor, inset-area, position-try a další související. Třeba už to v mezičase začalo být v prohlížečích podporované.
Reklama
