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 - nefunguje v Exploreru 6

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:

Protože fixed funguje od Internet Exploreru 7, má smysl začít position: fixed používat (aktualizováno 2011). Dosud to kvůli nepodpoře v IE 6 bylo skoro k ničemu, ale IE 6 vymizel. Pozor: aby position: fixed fungovalo v Internet Exploreru verze 9 (a asi i dalších), je potřeba dokument mít ve striktním módu (tedy se správným doctype).

Podpora

Podpora vlastnosti position
Prohlížeč Podpora ve verzích Poznámka
Internet Explorer všechny verze fixed až od verze 7
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Chrome, Opera všechny verze  

U Mozilly (nevím verzi) mi kdysi nefungovaly hodnoty top a left, pokud nebyly ve stejné složené závorce spolu s position.

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

 

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.