lekce03

Lekce 3: Pozicování

Cíl

Úcastnice:

• znají úskalí obtékání v CSS,
• znají vlastnost position a její možné hodnoty,
• chápou chování relativního pozicování vůči rodiči pro position: absolute.

Osnova

1. Pozicování – vlastnost position
   • Říkáme jak má být prvek na stránce umístěný
   • Složka position-priklady
2. Výchozí: position: static
   • Mají implicitně všechny prvky
   • Prvek se zobrazí tam, kde na něj vyjde řada
3. Relativní: 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
4. Absolutní: 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
5. Vzájemné překrývání prvků
   • Standardně pořadí, jak jsou v dokumentu
   • Prvky které nemají position: static jsou ve vrstvě nad
   • Řídí vlastnost z-index
6. Fixní pozice: position: fixed
   • Zůstává na obrazovce i když posouvám obrazovku
   • Zabírá použitelný prostor na obrazovce, pozor na mobily (řeší RWD)
7. Přilepená pozice: position: sticky
   • Kombinace static a fixed
   • Prvek se posouvá tak, aby byl vidět uvnitř svého rodiče

Domácí úkol

Zpracovat CSS podle zadané předlohy s předdefinovaným HTML.

Zadání: bit.ly/webaz-projekt1 (repo)

• Celý obsah je obalený v <div class="profil"> – nastavím šířku
• Uvnitř <div class="hlavicka"> ve které je obrázek fotky a ikony
  • Ikonka je bílá, stačí nastavit barvu pozadí a kulaté rohy (border-radius)
  • Ikonku lze napozicovat pomocí position: absolute uvnitř rodiče, který má position: relative
  • Fotce omezit šířku aby se přizpůsobila rodiči (width: 100%)