Nauczymy się, jak używać CSS
do przemieszczania elementów.
Nie tylko do szeregowania.
Będziemy nakładać
jedne na drugie.
Tu mamy stronę
z paroma nagłówkami, obrazkami
i akapitami.
Na razie są ułożone
wg pozycjonowania domyślnego,
którego używa przeglądarka.
To tzw. pozycjonowanie statyczne lub normalne.
Elementy śródliniowe,
np. obrazy,
są ustawione od lewej do prawej,
A elementy blokowe,
np. nagłówki i akapity,
są ułożone pionowo.
Możemy zmienić ten układ,
korzystając z własności CSS „position” (pozycja).
Wypróbujmy to przy zdjęciu.
Piszemy „position:”,
a potem wartość względną.
W metodzie pozycji względnej
rozmieszczacie elementy normalnie,
a potem przesuwacie o jakąś wartość.
Żeby zawiadomić przeglądarkę
o tej wartości,
użyjemy jakiejś kombinacji
czterech nowych właściwości CSS:
góra, dół, lewo, prawo.
Powiedzmy, że chcemy mieć nasz element
20 pikseli niżej.
Napiszemy top: 20 pikseli.
Przesuniemy 10 pikseli w bok.
Piszemy: 10 pikseli w lewo.
To jest fajne,
ale nie aż tak.
Pokażę wam coś znacznie lepszego:
pozycjonowanie bezwzględne.
Możemy wyciągnąć element
z układu
i umieścić go gdziekolwiek.
W tym celu
zmienię „relative” (względne)
na „absolute” (bezwzględne)
przy naszym krajobrazie.
Górę i lewą stronę zachowam.
Jak widzicie,
krajobraz zasłania
obrazek i nagłówek „Impreza taneczna”.
Poprawmy to.
Zacznijmy od Winstona.
Dodamy regułę
pozycjonowania bezwzględnego.
Dajmy, powiedzmy,
„góra: 40 pikseli”.
Albo niech będzie 50.
I lewa 50.
Dobrze to wygląda.
Hopper (Skacząca) chce być na wierzchu.
Ona także.
Jej też określimy
pozycję bezwzględną.
Powiedzmy, góra: 30 pikseli,
a lewa: 60 pikseli.
Niech to sprawia wrażenie,
jakby Hopper
tańczyła przed Winstonem.
Na razie tak to nie wygląda,
bo Winston znajduje się
na wierzchu.
Żeby to poprawić,
mogłabym zmienić kolejność
znaczników „image”
w HTML-u,
lepiej jednak będzie
skorzystać z właściwości CSS „z-index”.
Powiemy przeglądarce,
w jakiej kolejności
ustawiać elementy,
nadając im
z-indeksy.
Zacznijmy od krajobrazu
i nadajmy mu numer 1.
Na to - Winston z dwójką,
a na wierzch Hopper, trzecia.
Dobrze!
Teraz Hopper tańczy przed Winstonem,
chociaż nie ma ochoty.
Trudno, musi!
Jednak niektóre nagłówki
i kolumny są ukryte.
Spróbujmy…
chcę umieścić nagłówek
„Impreza taneczna” na wierzchu.
Określę więc dla niego
pozycję bezwzględną
i nadam mu numer 4.
Dobrze.
Może 10 pikseli w lewo.
Przesunę.
Może jeszcze trochę.
Teraz dobrze.
A tekst piosenki
niech wyświetla się
poniżej całej reszty.
Dla tych elementów
określę pozycję bezwzględną.
Można określić tylko górę,
która, jak wiecie,
będzie równa wysokości obrazka.
To 220 pikseli.
Teraz wygląda to dobrze.
Szalona impreza taneczna
na całego!
Zatrzymajcie teraz film
i spróbujcie przewinąć w dół.
Zobaczycie, że wszystko
przewija się razem.
Ważna sprawa:
pozycjonowanie absolutne
odnosi się do góry strony.
Gdy więc przewijacie,
to, co było 10 pikseli od góry,
zniknie z ekranu,
bo oddalacie się
od góry strony.
Inna możliwość
to pozycjonowanie ustalone.
Będzie wyglądało tak,
jakby elementy się nie ruszały.
Żeby to wypróbować,
zmienimy
„absolute” na „fixed” w nagłówku „h1”.
Zatrzymajcie film i spróbujcie przewijać.
Zobaczycie,
że „Impreza taneczna” nie zmienia miejsca.
Bo teraz jej pozycja
odnosi się do góry ekranu,
okna.
No dobrze. Wykorzystaliśmy
trzy właściwości pozycjonowania
i zrobiliśmy fajne rzeczy.
Kiedy używamy
pozycjonowania bezwzlędnego lub ustalonego?
Można je zastosować,
robiąc grę,
jak ja tutaj,
żeby rozłożyć elementy
scenki w przeglądarce.
Można też stosować to
do zwyczajnych stron,
np. w Khan Academy.
Pozycjonowanie bezwzględne
stosujemy do modeli na środku,
a pozycjonowanie ustalone
do pola przeszukiwania.
Zawsze będzie widoczne.
Nie będziecie używać pozycjonowania
na każdej stronie,
ale jeśli już,
to będziecie zadowoleni, że można.