Shrnutí

V 4. lekci CSS jsme se naučili jak můžeme precizně určovat pozici prvků na stránce.

A dozvěděli jsme se, že:

• Blokové prvky jsou přirozeně široké jako jejich rodič ale můžeme jim nastavovat šířku (width) a výšku (height).
• Přenastavit prvek na blokový můžeme pomocí display: block;.
• Prvkům se zobrazením v řádku nemůžeme nastavovat šířku a výšku.
• Přenastavit zobrazení prvku na řádkové můžeme pomocí display: inline;.
• Zobrazení jako blok v řádku se chová jako zobrazení v řádku s tím rozdílem, že můžeme nastavovat šířku a výšku.
• Přenastavit zobrazení prvku na blok v řádku můžeme pomocí display: inline-block;.
• Výchozí pozice prvků je statická. Ta pokládá prvky zleva doprava a shora dolů.
• Prvky s jinou pozicí odsazujeme: zleva (left), zprava (right), shora (top), zespodu (bottom) 
• Relativní pozice (position: relative;) je jako statická s tím rozdílem, že ji můžeme odsadit od statické pozice.
• Absolutní pozice (position: absolute;) je odsazena od nejbližšího rodiče s jinou pozicí než statickou nebo od stránky (pokud mají rodiče jen statickou pozici).
• Prvek s absolutní pozicí je ignorován ostatními prvky.
• Zafixovaná pozice (position: fixed;) je stejná jako absolutní pozice s jediným rozdílem, že se nehýbe při pohybu stránky.
• Lepivá pozice (position: sticky;) je stejná jako relativní s tím rozdílem, že nezmizí ze stránky při jejím pohybu, ale zůstane přilepená na rohu stránky.

V další lekci se podíváme jak nastavovat specifické barvy textu i pozadí.