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φ