Cvičení: CSS position
Kočičí domeček
Stáhněte si připravenou stránku. V kočičím domečku máte připravené kočičky, které budeme pozicovat. Podívejte se na výsledný obrázek.

Každá z pěti kočiček si musí najít svoje místo.
- Kočička s dopisy v levém dolním rohu,
- kočička s motýlem přesně uprostřed domečku,
- kočička s knihou sedí tak, že na levém horním rohu je přesně její střed (vyčuhuje z domečku),
- kočka se sluchátky tančí přesně 30px od horního a 30px od pravého okraje
- kočka s myší spí v pravém dolním rohu.
V souboru style.css je také přímo u daných tříd návod. Na počítání některých vzdáleností se bude hodit použití funkce calc.
Okno
Stáhněte si webovou stránku,
- Posuňte vyskakovací okno 200px od levého okraje stránky. Zamyslete se, v čem bude rozdíl, když na to použijete position
nebo position: relative. - Tlačítka "Ok" a "X" posuňte na vhodnější místa. Tedy "Ok" dolů přibližně doprostřed (nemusí být přesně), "X" doprava nahoru. Napozicujte je vůči modálu, ve kterém se nacházejí.
Bonus
-
Přidejte na stránku mnohem více textu, tak, aby se stránkou dalo posouvat dolů (scroll). Můžete na to použít odstavce p plné textu s lorem ipsum.
-
Nápověda: Lorem ipsum text se generuje pomocí slova lorem následovaného číslovkou (bez mezery), pak stačí zmáčknout Tab. Tedy třeba lorem5+Tab
-
Přidejte na stránku další boxík, kde nabízíte uživatelům pomoc, pokud se ocitnou v nesnázích. Vhodně ho ostylujte.
-
Pomocí vhodného použití vlastnosti position zajistěte, aby tento boxík byl vidět nezávisle na tom, jak daleko je stránka posunuta.