0:00:00.000,0:00:02.233
Nauczymy się, jak używać CSS

0:00:02.233,0:00:04.233
do przemieszczania elementów.

0:00:04.233,0:00:06.004
Nie tylko do szeregowania.

0:00:06.004,0:00:07.637
Będziemy nakładać

0:00:07.637,0:00:09.029
jedne na drugie.

0:00:09.029,0:00:11.611
Tu mamy stronę

0:00:11.611,0:00:16.041
z paroma nagłówkami, obrazkami

0:00:16.041,0:00:18.069
i akapitami.

0:00:18.069,0:00:20.155
Na razie są ułożone

0:00:20.155,0:00:22.177
wg pozycjonowania domyślnego,

0:00:22.177,0:00:24.212
którego używa przeglądarka.

0:00:24.212,0:00:26.959
To tzw. pozycjonowanie[br]statyczne lub normalne.

0:00:26.959,0:00:29.388
Elementy śródliniowe,

0:00:29.388,0:00:30.699
np. obrazy,

0:00:30.699,0:00:32.296
są ustawione od lewej do prawej,

0:00:32.296,0:00:33.800
A elementy blokowe,

0:00:33.800,0:00:35.490
np. nagłówki i akapity,

0:00:35.490,0:00:37.565
są ułożone pionowo.

0:00:37.565,0:00:39.915
Możemy zmienić ten układ,

0:00:39.915,0:00:42.670
korzystając z własności CSS[br]„position” (pozycja).

0:00:42.670,0:00:45.621
Wypróbujmy to przy zdjęciu.

0:00:45.621,0:00:49.657
Piszemy „position:”,

0:00:49.657,0:00:51.446
a potem wartość względną.

0:00:51.446,0:00:53.406
W metodzie pozycji względnej

0:00:53.406,0:00:55.407
rozmieszczacie elementy normalnie,

0:00:55.407,0:00:57.791
a potem przesuwacie o jakąś wartość.

0:00:57.791,0:01:00.156
Żeby zawiadomić przeglądarkę

0:01:00.156,0:01:01.501
o tej wartości,

0:01:01.501,0:01:03.140
użyjemy jakiejś kombinacji

0:01:03.140,0:01:05.179
czterech nowych właściwości CSS:

0:01:05.179,0:01:07.425
góra, dół, lewo, prawo.

0:01:07.425,0:01:09.441
Powiedzmy, że chcemy mieć[br]nasz element

0:01:09.441,0:01:11.875
20 pikseli niżej.

0:01:11.875,0:01:13.626
Napiszemy top: 20 pikseli.

0:01:13.626,0:01:15.222
Przesuniemy 10 pikseli w bok.

0:01:15.222,0:01:16.675
Piszemy: 10 pikseli w lewo.

0:01:16.675,0:01:18.668
To jest fajne,

0:01:18.668,0:01:20.893
ale nie aż tak.

0:01:20.893,0:01:23.472
Pokażę wam coś znacznie lepszego:

0:01:23.472,0:01:25.077
pozycjonowanie bezwzględne.

0:01:25.077,0:01:26.583
Możemy wyciągnąć element

0:01:26.583,0:01:28.525
z układu

0:01:28.525,0:01:30.613
i umieścić go gdziekolwiek.

0:01:30.613,0:01:31.664
W tym celu

0:01:31.664,0:01:32.945
zmienię „relative” (względne)

0:01:32.945,0:01:34.042
na „absolute” (bezwzględne)

0:01:34.042,0:01:35.199
przy naszym krajobrazie.

0:01:35.199,0:01:36.575
Górę i lewą stronę zachowam.

0:01:36.575,0:01:37.778
Jak widzicie,

0:01:37.778,0:01:39.213
krajobraz zasłania

0:01:39.213,0:01:41.705
obrazek i nagłówek[br]„Impreza taneczna”.

0:01:41.705,0:01:42.772
Poprawmy to.

0:01:42.772,0:01:44.791
Zacznijmy od Winstona.

0:01:44.791,0:01:48.456
Dodamy regułę

0:01:48.456,0:01:52.096
pozycjonowania bezwzględnego.

0:01:52.096,0:01:54.302
Dajmy, powiedzmy,

0:01:54.302,0:01:56.110
„góra: 40 pikseli”.

0:01:56.110,0:01:58.394
Albo niech będzie 50.

0:01:58.394,0:02:00.055
I lewa 50.

0:02:00.055,0:02:02.204
Dobrze to wygląda.

0:02:02.204,0:02:04.302
Hopper (Skacząca)[br]chce być na wierzchu.

0:02:04.302,0:02:05.617
Ona także.

0:02:05.617,0:02:07.295
Jej też określimy

0:02:07.295,0:02:11.661
pozycję bezwzględną.

0:02:11.661,0:02:15.218
Powiedzmy, góra: 30 pikseli,

0:02:15.218,0:02:17.814
a lewa: 60 pikseli.

0:02:17.814,0:02:19.613
Niech to sprawia wrażenie,

0:02:19.613,0:02:21.216
jakby Hopper

0:02:21.216,0:02:23.743
tańczyła przed Winstonem.

0:02:23.743,0:02:26.640
Na razie tak to nie wygląda,

0:02:26.640,0:02:28.244
bo Winston znajduje się

0:02:28.244,0:02:30.358
na wierzchu.

0:02:30.358,0:02:31.948
Żeby to poprawić,

0:02:31.948,0:02:33.619
mogłabym zmienić kolejność

0:02:33.619,0:02:35.136
znaczników „image”

0:02:35.136,0:02:36.684
w HTML-u,

0:02:36.684,0:02:38.699
lepiej jednak będzie

0:02:38.699,0:02:42.257
skorzystać z właściwości CSS[br]„z-index”.

0:02:42.257,0:02:43.939
Powiemy przeglądarce,

0:02:43.939,0:02:45.236
w jakiej kolejności

0:02:45.236,0:02:46.035
ustawiać elementy,

0:02:46.035,0:02:47.384
nadając im

0:02:47.384,0:02:48.247
z-indeksy.

0:02:48.247,0:02:50.691
Zacznijmy od krajobrazu

0:02:50.691,0:02:53.268
i nadajmy mu numer 1.

0:02:53.268,0:02:56.345
Na to - Winston z dwójką,

0:02:56.345,0:02:59.054
a na wierzch Hopper, trzecia.

0:02:59.054,0:03:00.081
Dobrze!

0:03:00.081,0:03:02.641
Teraz Hopper[br]tańczy przed Winstonem,

0:03:02.641,0:03:04.178
chociaż nie ma ochoty.

0:03:04.178,0:03:05.239
Trudno, musi!

0:03:05.239,0:03:07.801
Jednak niektóre nagłówki

0:03:07.801,0:03:09.991
i kolumny są ukryte.

0:03:09.991,0:03:12.450
Spróbujmy…

0:03:12.450,0:03:13.942
chcę umieścić nagłówek

0:03:13.942,0:03:16.886
„Impreza taneczna” na wierzchu.

0:03:16.886,0:03:19.081
Określę więc dla niego

0:03:19.081,0:03:20.698
pozycję bezwzględną

0:03:20.698,0:03:21.757
i nadam mu numer 4.

0:03:21.757,0:03:22.997
Dobrze.

0:03:22.997,0:03:24.421
Może 10 pikseli w lewo.

0:03:24.421,0:03:25.252
Przesunę.

0:03:25.252,0:03:26.912
Może jeszcze trochę.

0:03:26.912,0:03:28.518
Teraz dobrze.

0:03:28.518,0:03:29.688
A tekst piosenki

0:03:29.688,0:03:31.113
niech wyświetla się

0:03:31.113,0:03:32.816
poniżej całej reszty.

0:03:32.816,0:03:35.525
Dla tych elementów

0:03:35.525,0:03:38.219
określę pozycję bezwzględną.

0:03:38.219,0:03:39.468
Można określić tylko górę,

0:03:39.468,0:03:40.679
która, jak wiecie,

0:03:40.679,0:03:42.574
będzie równa wysokości obrazka.

0:03:42.574,0:03:45.119
To 220 pikseli.

0:03:45.119,0:03:48.425
Teraz wygląda to dobrze.

0:03:48.425,0:03:50.129
Szalona impreza taneczna

0:03:50.129,0:03:52.179
na całego!

0:03:52.179,0:03:53.822
Zatrzymajcie teraz film

0:03:53.822,0:03:55.770
i spróbujcie przewinąć w dół.

0:03:55.770,0:03:58.051
Zobaczycie, że wszystko

0:03:58.051,0:03:59.209
przewija się razem.

0:03:59.209,0:04:00.989
Ważna sprawa:

0:04:00.989,0:04:02.616
pozycjonowanie absolutne

0:04:02.616,0:04:04.053
odnosi się do góry strony.

0:04:04.053,0:04:06.017
Gdy więc przewijacie,

0:04:06.040,0:04:07.733
to, co było 10 pikseli od góry,

0:04:07.733,0:04:10.550
zniknie z ekranu,

0:04:10.550,0:04:11.919
bo oddalacie się

0:04:11.919,0:04:14.640
od góry strony.

0:04:14.640,0:04:15.807
Inna możliwość

0:04:15.807,0:04:17.108
to pozycjonowanie ustalone.

0:04:17.108,0:04:18.765
Będzie wyglądało tak,

0:04:18.765,0:04:20.353
jakby elementy się nie ruszały.

0:04:20.353,0:04:22.096
Żeby to wypróbować,

0:04:22.096,0:04:23.051
zmienimy

0:04:23.051,0:04:25.693
„absolute” na „fixed”[br]w nagłówku „h1”.

0:04:25.693,0:04:29.073
Zatrzymajcie film[br]i spróbujcie przewijać.

0:04:29.073,0:04:31.085
Zobaczycie,

0:04:31.085,0:04:33.678
że „Impreza taneczna”[br]nie zmienia miejsca.

0:04:33.678,0:04:35.667
Bo teraz jej pozycja

0:04:35.667,0:04:39.216
odnosi się do góry ekranu,

0:04:39.216,0:04:40.852
okna.

0:04:40.852,0:04:43.917
No dobrze. Wykorzystaliśmy

0:04:43.917,0:04:45.941
trzy właściwości pozycjonowania

0:04:45.941,0:04:47.697
i zrobiliśmy fajne rzeczy.

0:04:47.697,0:04:48.519
Kiedy używamy

0:04:48.519,0:04:51.071
pozycjonowania bezwzlędnego[br]lub ustalonego?

0:04:51.071,0:04:53.109
Można je zastosować,

0:04:53.109,0:04:54.183
robiąc grę,

0:04:54.183,0:04:55.693
jak ja tutaj,

0:04:55.693,0:04:57.219
żeby rozłożyć elementy

0:04:57.219,0:04:58.864
scenki w przeglądarce.

0:04:58.864,0:05:00.229
Można też stosować to

0:05:00.229,0:05:01.634
do zwyczajnych stron,

0:05:01.634,0:05:03.026
np. w Khan Academy.

0:05:03.026,0:05:04.383
Pozycjonowanie bezwzględne

0:05:04.383,0:05:06.279
stosujemy do modeli na środku,

0:05:06.279,0:05:07.650
a pozycjonowanie ustalone

0:05:07.650,0:05:08.751
do pola przeszukiwania.

0:05:08.751,0:05:11.813
Zawsze będzie widoczne.

0:05:11.813,0:05:14.232
Nie będziecie używać[br]pozycjonowania

0:05:14.232,0:05:15.431
na każdej stronie,

0:05:15.431,0:05:16.704
ale jeśli już,

0:05:16.704,0:05:18.967
to będziecie zadowoleni, że można.