Layout

Pozicování

Jak vytrhnout prvek z běžného toku stránky a přišpendlit ho jinam: do rohu karty, k okraji okna nebo k hornímu okraji při skrolování.

Postavíme seznam aktivit s nálepkami, sticky headerem a tlačítkem Nahoru. V náhledu se dá skrolovat, zkuste to.

Začátek

Běžný tok stránky

Bez pozicování jde všechno za sebou, jak je to v HTML: hlavička, karty a na úplném konci odkaz Nahoru. Nálepky „Novinka“ a „Plno“ zabírají vlastní řádek nad nadpisem.

Výchozí hodnota je position: static: prvek je tam, kam ho poslal tok stránky.

Past

absolute

Nálepky chceme do pravého horního rohu karty. absolute prvek vytrhne z toku a umístí ho podle top, right, bottom a left.

Jenže obě nálepky odletěly do rohu celé stránky a leží na sobě. Absolutní prvek se měří od nejbližšího pozicovaného předka, a karta pozicovaná není.

Vlastnost · 1

Kotva relative

Kartě dáme position: relative. Sama se nikam nepohne, ale stane se kotvou: nálepky uvnitř se teď měří od jejích rohů.

Dvojice relative na rodiči a absolute na dítěti je nejčastější použití pozicování vůbec.

Vlastnost · 2

Přišpendlit k oknu fixed

Odkaz Nahoru je až úplně dole a nikdo ho nenajde. fixed ho připíchne k oknu prohlížeče: zůstane v pravém dolním rohu, ať skrolujete kamkoli.

Zaskrolujte v náhledu: tlačítko se nehne. A když na něj kliknete, náhled vyjede nahoru.

Vlastnost · 3

sticky

Hlavička má zůstat vidět. sticky je kříženec: dokud je hlavička na svém místě, chová se normálně. Jakmile by odjela z okna, přilepí se k hornímu okraji.

Zaskrolujte v náhledu. Hlavička drží nahoře, ale karty přes ni přejíždějí. To spraví další krok.

Vlastnost · 4

Co je navrchu z-index

Karty jsou pozicované (relative) a v HTML jsou až za hlavičkou, proto se kreslí přes ni. z-index určí pořadí vrstev: vyšší číslo je blíž k vám.

z-index funguje jen u pozicovaných prvků, na static nemá vliv. Stačí malá čísla: 1, 10, 100. z-index: 99999 je znamení, že se v tom nikdo nevyzná.

Responzivita

Na telefonu lišta dole

Malé tlačítko v rohu se na telefonu špatně trefuje palcem. Na mobilu ho roztáhneme přes celou šířku dolního okraje: stačí nastavit left i right na nulu.

Když zadáte left i right zároveň, prvek se roztáhne mezi ně. Stejně funguje top a bottom.

Shrnutí

Pět hodnot position

Ano

• relative na rodiči, absolute na dítěti
• fixed pro prvky přišpendlené k oknu
• sticky s top: 0 pro hlavičky
• z-index s malými čísly

Ne

• absolute na skládání celé stránky, na to je flexbox a grid
• absolute bez pozicovaného rodiče
• z-index: 99999

Hlavička, která se při skrolování zmenší, je v lekci Sticky header.

Další lekce: Pozadí a gradienty →