Position

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

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:

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

Position: fixed se chová jako position: absolute, ale pokud se dokumentem roluje, drží se prvek v okně na místě. Protože to nefunguje v Internet Exploreru, je to dnes (psáno 2003) skoro k ničemu.

Podpora

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.

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

Vizte též

Left = souřadnice x počítaná zleva doprava, Top = souřadnice y počítaná shora dolů, Right = souřadnice x počítaná zprava doleva, Bottom = souřadnice y počítaná zdola nahoru, Z-index = priorita při překrývání,  Clip = ostřihnutí pozicovaného prvku, Délky v CSS

Odkazy

CSS pozicování