Vlastnost position umožňuje nastavit nebo změnit pozici elementu.

• static
• relative
• absolute
• fixed

Často se používají společně se 4 vlastnostmi, které určují souřadnice: left, right, top a bottom.

Obvykle se ale využívá jen dvě zároveň: jedna pro svislou pozici a druhá pro vodorovnou.

Výchozí hodnota: prvky s tímhle pozicováním se chovají „přirozeně“: jsou součástí toku dokumentu.

Když nastavíš hodnotu na relative, element se pohne relativně vzhledem ke svojí původní pozici.

<p class="uvod">Hlavní organizátorka musí mít přehled o tom, jak kurzy PyLadies fungují. Proto by to měla být bývalá účastnice/koučka, nebo někdo, kdo je v kontaktu s organizátorkami z ostatních měst.</p>

<p>Urči den a čas, kdy se budete scházet. Každý sraz trvá dvě hodiny a srazy se opakují každý týden.</p>

<p>Domluv místo, kde se bude kurz konat. Jestli nevíš, zeptej se v místních IT firmách a školách, jestli by nějaký prostor nezapůjčili.</p>

p { background-color: silver; }

.uvod {
    background-color: skyblue;
    position: relative;
    left: -1em;
    top: 0.5em;
}

První odstavec je posunutý doleva, protože má zleva nastavenou negativní pozici a taký dolů, protože shora je kladná hodnota top.

Všimni si, že ostatní odstavce jsou tam, kde by byly, kdyby první neměl nastavenou relativní pozici. Ostatní prvky jako by nevěděly, že se něco změnilo.

Změna pozice pomocí position: relative; nemá na tok dokumentu vliv.

<div>
    Já jsem relativně pozicovaný.
    <p>Já jsem pozicován absolutně.</p>
</div>

div {
    background: skyblue;
    height: 200px;

    position: relative;
}

p {
    background: orange;

    position: absolute;
    bottom: 10px;
    left: 30px;
}

Modrý div je pozicovaný relativně. To kromě možnosti ho posunout znamená ještě jednu věc: vytvoření nového souřadnicového systému, který platí pro všechny jeho potomky.

Protože odstavec je pozicován absolutně, můžeš ho umístit kam chceš a je to všechno absolutně vůči modrému divu.

Tahle pozice funguje jako absolutní, ale rozdíl je v tom, že souřadnicovým systémem je viewport, tedy vnitřek okna prohlížeče. Prvek tedy zůstane zafixovaný v daném místě bez ohledu na to, jestli se díváš na začátek nebo konec dokumentu.

Prvky skládají nad sebe v pořadí, v jak jsou v kódu napsané a to by znamenalo, že má-li něco být pozicováno

<div>
    <p class="prvni">První!</p>
    <p class="druhy">Druhý!</p>
</div>

div {
    background-color: forestgreen;
    position: relative;
    height:6em;
}

p {
    position: absolute;
    width: 5em;
    height: 3em;
}

.prvni {
    background-color: orange;
    left: 1em;
    top: 1em;
}

.druhy {
    background-color: skyblue;
    left: 2em;
    top: 2em;
}