Position

CSS vlastnost position určuje způsob počítání polohy prvku.

position
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

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:

  1. posunutí prvku trochu jinam pomocí top a left
  2. vytvoření nového omezujícího bloku (i když se neposunou), počátku souřadnic
  3. 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:

Position: sticky se chová jako kombinace relativní a fixní pozice.

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 a Edge (jaro 2017) a Firefox neumí positon: sticky u tabulkových prvků. To podle mě tolik nevadí, prvek v nich prostě při rolování normálně odjede. Příklady na position: sticky

Podpora

Podpora vlastnosti position
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer a Edge fixed až od verze 7 sticky nepodporuje
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.

Simulace position: fixed v Exploreru 6

Příklad simulace position: fixed v Exploreru využívá chybu v Internet Exploreru, nepříliš spolehlivé. Lepší je se na Internet Explorer prostě vykašlat.

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

Příklad position: fixed

Příklady na position: sticky

Odkaz mimo

Náhrada chybějící podpory position: fixed - Pixy.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.