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.