Umisťování

V této části se podíáme, jak lze pomocí CSS řídit polohu jednotlivých prvků na stránce. Standardně jsou prvky stránky formátovány v tak zvaném normálním toku (normal flow). Ten je veskrze poklidný – blokové prvky skládá hezky pod sebe, zatímco prvky řádkové jsou narovnány vedle sebe do řádků, jejichž šířka závisí na šířce obsahujícího bloku.

Vlastnost position

Chcete-li do této idyly zasáhnout, použijte vlastnost position. Jejím prostřednictvím můžete předepsat způsob (charakter) umístění prvku. O jeho konkrétní poloze pak rozhodnou vlastnosti top, right, bottom a left. Vlastnost position může nabývat následujících hodnot:

static

Představuje normální tok dat. S prvkem se nedějí žádné revoluční věci a je umístěn podle pravidel popsaných výše. Jistě vás nepřekvapí, že static je výchozí hodnotou vlastnosti position.

relative

Relativní umístění. Prvek se posune vůči poloze, která by mu připadla v rámci normálního toku.

absolute

Absolutní umístění. Prvek je vyjmut z běžného toku a přesunut na přesně zadanou pozici.

fixed

Pevné umístění. Velmi se podobá absolutnímu, poloha se však vztahuje k oknu prohlížeče (případně k okrajům papíru při risku), nikoli k prvkům na stránce.

Určení polohy

Čtveřice vlastností top, right, bottom a left určuje posunutí příslušného okraje prvku vůči odpovídajícímu okraji, k němuž se umístění vztahuje. Takže například

#menu {
    position: absolute;
    top: 0;
    left: 0;
}

umístí menu do levého horního okraje stránky (jeho levý a horní okraj se posunou o nulovou vzdálenost vůči levému a hronímu okraji stránky, proti nimž je poloha určována). Naproti tomu definice

#menu {
    position: absolute;
    bottom: 0;
    right: 0;
}

by je umístila do pravého dolního rohu.

Může to být poněkud matoucí, protože zvětšováním hodnoty top posouváte prvek dolů a podobně. Vlastnost zkrátka odsouvá dotyčný okraj, vkládá mezeru mezi jeho původní a novou pozici.

Hodnota může být i záporná. V tom případě působí stejně, jako stejně velká kladná hodnota na protější straně. Pokud bych například chtěl horní index (prvek <sup>) posunout o 0,5 ex vzhůru, mám k dispozici dvě rovnocenné cesty. Buď

sup {
    position: relative;
    bottom: 0.5ex;
}

(posouvám nahoru, takže odsouvám spodní okraj) nebo

sup {
    position: relative;
    top: -0.5ex;
}