lucierez / CzechitasHtml_lekce_03

tags	lang	slideOptions	title
czechitas	cs	transition theme margin minScale maxScale width height none night 0.05 0.1 5 2560 1600	Lekce 03 | Tvořím web A–Z

{%hackmd anYwyN--TziyASUWcqP-Gw %}

Tvořím web A–Z: lekce 03

---

Dotazy, nejasnosti, frustrace, vtípky...

---

Pozicování

Credit for Geronimo Morisot Morla

---

Vlastnost position

• Říkáme jak má být prvek na stránce umístěný
• Github repo s dnešním cvičením https://github.com/tvorimweb-2020-praha-podzim/lekce_03.git

---

Position: static

• Mají implicitně všechny prvky
• Prvek se zobrazí tam, kde na něj vyjde řada

---

Position: relative

• Prvek posunu relativně vůči jeho výchozí pozici, zabírá své původní místo
• Vlastnosti top, left, right, bottom určují posun vůči výchozí pozici
• Vybírám si hranu, v jejímž směru posouvám
• Záporná hodnota posouvá v opačném směru

---

Position: absolute

• Prvek zcela vyjme z toku dokumentu a lze jej libovolně umístit
• Pozicuje se vzhledem ke svému nejbližšímu rodiči který nemá position: static
• Pokud takový rodič neexistuje, pozicuje se vůči stránce

---

Vzájemné překrývání prvků

• Standardní pořadí, jak jsou v dokumentu
• Prvky které nemají position: static jsou ve vrstvě nahoře
• Lze řídit přes vlastnost z-index

---

Position: fixed

• Zůstává na obrazovce i když posouvám obrazovku
• Zabírá použitelný prostor na obrazovce
• Pozor na mobily!!!

---

Position: sticky

• Kombinace static a fixed
• Prvek se posouvá tak, aby byl vidět uvnitř svého rodiče

---

První povinný úkol

• Zadaný v classrooms
• Ukážeme si co je třeba