Pozycjonowanie elementów

workshop: #22c3-pos-abs-rel.html

Mini-warsztat CSS: pozycjonowanie elementów

Przykłady różnego pozycjonowania elementów: absolutne oraz relatywne

Przygotowanie

Przygotuj 5 sekcji ze strukturami HTML: SECTION oraz wewnątrz DIV. Każdy element DIV musi zawierać znacznik H2 z tytułem pozycjonowania oraz P z opisem.

Dodaj selektor klasy pa z regułą position: absolute dla elementu DIV w Sekcji#1
Dodaj selektor klasy pat z regułami position: absolute wraz z regułami: top: 40px oraz left: 0px dla elementu DIV w Sekcji#2
Dodaj selektor klasy pr z regułą position: relative dla elementu DIV w Sekcji #3
Dodaj klasy z regułami position: relative dla Sekcji #4 (znacznik SECTION) oraz position: absolute dla elementu DIV w Sekcji#4
Dodaj selektor klasy pf z regułą position: fixed wraz z regułami:
top: 0px; right: 0px; opacity: 0.8; dla elementu DIV w Sekcji#5

Pozycjonowanie absolutne

czyli licząc od lewego górnego rogu okna przeglądarki bez reguł top i left

Pozycjonowanie absolutne (+top, +left)

czyli licząc od lewego górnego rogu okna przeglądarki wraz z regułami top i left

Pozycjonowanie relatywne

czyli względem poczatkowej (domyślnej) pozycji elementu

Pozycjonowanie absolutne w elemencie pozycjonowanym relatywnie

czyli w elemencie pozycjonowanym relatywnie znajduje się element pozycjonowany absolutnie

Pozycjonowanie ustalone