WEBVTT

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

00:00:02.233 --> 00:00:04.233
do przemieszczania elementów.

00:00:04.233 --> 00:00:06.004
Nie tylko do szeregowania.

00:00:06.004 --> 00:00:07.637
Będziemy nakładać

00:00:07.637 --> 00:00:09.029
jedne na drugie.

00:00:09.029 --> 00:00:11.611
Tu mamy stronę

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

00:00:16.041 --> 00:00:18.069
i akapitami.

00:00:18.069 --> 00:00:20.155
Na razie są ułożone

00:00:20.155 --> 00:00:22.177
wg pozycjonowania domyślnego,

00:00:22.177 --> 00:00:24.212
którego używa przeglądarka.

00:00:24.212 --> 00:00:26.959
To tzw. pozycjonowanie
statyczne lub normalne.

00:00:26.959 --> 00:00:29.388
Elementy śródliniowe,

00:00:29.388 --> 00:00:30.699
np. obrazy,

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

00:00:32.296 --> 00:00:33.800
A elementy blokowe,

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

00:00:35.490 --> 00:00:37.565
są ułożone pionowo.

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

00:00:39.915 --> 00:00:42.670
korzystając z własności CSS
„position” (pozycja).

00:00:42.670 --> 00:00:45.621
Wypróbujmy to przy zdjęciu.

00:00:45.621 --> 00:00:49.657
Piszemy „position:”,

00:00:49.657 --> 00:00:51.446
a potem wartość względną.

00:00:51.446 --> 00:00:53.406
W metodzie pozycji względnej

00:00:53.406 --> 00:00:55.407
rozmieszczacie elementy normalnie,

00:00:55.407 --> 00:00:57.791
a potem przesuwacie o jakąś wartość.

00:00:57.791 --> 00:01:00.156
Żeby zawiadomić przeglądarkę

00:01:00.156 --> 00:01:01.501
o tej wartości,

00:01:01.501 --> 00:01:03.140
użyjemy jakiejś kombinacji

00:01:03.140 --> 00:01:05.179
czterech nowych właściwości CSS:

00:01:05.179 --> 00:01:07.425
góra, dół, lewo, prawo.

00:01:07.425 --> 00:01:09.441
Powiedzmy, że chcemy mieć
nasz element

00:01:09.441 --> 00:01:11.875
20 pikseli niżej.

00:01:11.875 --> 00:01:13.626
Napiszemy top: 20 pikseli.

00:01:13.626 --> 00:01:15.222
Przesuniemy 10 pikseli w bok.

00:01:15.222 --> 00:01:16.675
Piszemy: 10 pikseli w lewo.

00:01:16.675 --> 00:01:18.668
To jest fajne,

00:01:18.668 --> 00:01:20.893
ale nie aż tak.

00:01:20.893 --> 00:01:23.472
Pokażę wam coś znacznie lepszego:

00:01:23.472 --> 00:01:25.077
pozycjonowanie bezwzględne.

00:01:25.077 --> 00:01:26.583
Możemy wyciągnąć element

00:01:26.583 --> 00:01:28.525
z układu

00:01:28.525 --> 00:01:30.613
i umieścić go gdziekolwiek.

00:01:30.613 --> 00:01:31.664
W tym celu

00:01:31.664 --> 00:01:32.945
zmienię „relative” (względne)

00:01:32.945 --> 00:01:34.042
na „absolute” (bezwzględne)

00:01:34.042 --> 00:01:35.199
przy naszym krajobrazie.

00:01:35.199 --> 00:01:36.575
Górę i lewą stronę zachowam.

00:01:36.575 --> 00:01:37.778
Jak widzicie,

00:01:37.778 --> 00:01:39.213
krajobraz zasłania

00:01:39.213 --> 00:01:41.705
obrazek i nagłówek
„Impreza taneczna”.

00:01:41.705 --> 00:01:42.772
Poprawmy to.

00:01:42.772 --> 00:01:44.791
Zacznijmy od Winstona.

00:01:44.791 --> 00:01:48.456
Dodamy regułę

00:01:48.456 --> 00:01:52.096
pozycjonowania bezwzględnego.

00:01:52.096 --> 00:01:54.302
Dajmy, powiedzmy,

00:01:54.302 --> 00:01:56.110
„góra: 40 pikseli”.

00:01:56.110 --> 00:01:58.394
Albo niech będzie 50.

00:01:58.394 --> 00:02:00.055
I lewa 50.

00:02:00.055 --> 00:02:02.204
Dobrze to wygląda.

00:02:02.204 --> 00:02:04.302
Hopper (Skacząca)
chce być na wierzchu.

00:02:04.302 --> 00:02:05.617
Ona także.

00:02:05.617 --> 00:02:07.295
Jej też określimy

00:02:07.295 --> 00:02:11.661
pozycję bezwzględną.

00:02:11.661 --> 00:02:15.218
Powiedzmy, góra: 30 pikseli,

00:02:15.218 --> 00:02:17.814
a lewa: 60 pikseli.

00:02:17.814 --> 00:02:19.613
Niech to sprawia wrażenie,

00:02:19.613 --> 00:02:21.216
jakby Hopper

00:02:21.216 --> 00:02:23.743
tańczyła przed Winstonem.

00:02:23.743 --> 00:02:26.640
Na razie tak to nie wygląda,

00:02:26.640 --> 00:02:28.244
bo Winston znajduje się

00:02:28.244 --> 00:02:30.358
na wierzchu.

00:02:30.358 --> 00:02:31.948
Żeby to poprawić,

00:02:31.948 --> 00:02:33.619
mogłabym zmienić kolejność

00:02:33.619 --> 00:02:35.136
znaczników „image”

00:02:35.136 --> 00:02:36.684
w HTML-u,

00:02:36.684 --> 00:02:38.699
lepiej jednak będzie

00:02:38.699 --> 00:02:42.257
skorzystać z właściwości CSS
„z-index”.

00:02:42.257 --> 00:02:43.939
Powiemy przeglądarce,

00:02:43.939 --> 00:02:45.236
w jakiej kolejności

00:02:45.236 --> 00:02:46.035
ustawiać elementy,

00:02:46.035 --> 00:02:47.384
nadając im

00:02:47.384 --> 00:02:48.247
z-indeksy.

00:02:48.247 --> 00:02:50.691
Zacznijmy od krajobrazu

00:02:50.691 --> 00:02:53.268
i nadajmy mu numer 1.

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

00:02:56.345 --> 00:02:59.054
a na wierzch Hopper, trzecia.

00:02:59.054 --> 00:03:00.081
Dobrze!

00:03:00.081 --> 00:03:02.641
Teraz Hopper
tańczy przed Winstonem,

00:03:02.641 --> 00:03:04.178
chociaż nie ma ochoty.

00:03:04.178 --> 00:03:05.239
Trudno, musi!

00:03:05.239 --> 00:03:07.801
Jednak niektóre nagłówki

00:03:07.801 --> 00:03:09.991
i kolumny są ukryte.

00:03:09.991 --> 00:03:12.450
Spróbujmy…

00:03:12.450 --> 00:03:13.942
chcę umieścić nagłówek

00:03:13.942 --> 00:03:16.886
„Impreza taneczna” na wierzchu.

00:03:16.886 --> 00:03:19.081
Określę więc dla niego

00:03:19.081 --> 00:03:20.698
pozycję bezwzględną

00:03:20.698 --> 00:03:21.757
i nadam mu numer 4.

00:03:21.757 --> 00:03:22.997
Dobrze.

00:03:22.997 --> 00:03:24.421
Może 10 pikseli w lewo.

00:03:24.421 --> 00:03:25.252
Przesunę.

00:03:25.252 --> 00:03:26.912
Może jeszcze trochę.

00:03:26.912 --> 00:03:28.518
Teraz dobrze.

00:03:28.518 --> 00:03:29.688
A tekst piosenki

00:03:29.688 --> 00:03:31.113
niech wyświetla się

00:03:31.113 --> 00:03:32.816
poniżej całej reszty.

00:03:32.816 --> 00:03:35.525
Dla tych elementów

00:03:35.525 --> 00:03:38.219
określę pozycję bezwzględną.

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

00:03:39.468 --> 00:03:40.679
która, jak wiecie,

00:03:40.679 --> 00:03:42.574
będzie równa wysokości obrazka.

00:03:42.574 --> 00:03:45.119
To 220 pikseli.

00:03:45.119 --> 00:03:48.425
Teraz wygląda to dobrze.

00:03:48.425 --> 00:03:50.129
Szalona impreza taneczna

00:03:50.129 --> 00:03:52.179
na całego!

00:03:52.179 --> 00:03:53.822
Zatrzymajcie teraz film

00:03:53.822 --> 00:03:55.770
i spróbujcie przewinąć w dół.

00:03:55.770 --> 00:03:58.051
Zobaczycie, że wszystko

00:03:58.051 --> 00:03:59.209
przewija się razem.

00:03:59.209 --> 00:04:00.989
Ważna sprawa:

00:04:00.989 --> 00:04:02.616
pozycjonowanie absolutne

00:04:02.616 --> 00:04:04.053
odnosi się do góry strony.

00:04:04.053 --> 00:04:06.017
Gdy więc przewijacie,

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

00:04:07.733 --> 00:04:10.550
zniknie z ekranu,

00:04:10.550 --> 00:04:11.919
bo oddalacie się

00:04:11.919 --> 00:04:14.640
od góry strony.

00:04:14.640 --> 00:04:15.807
Inna możliwość

00:04:15.807 --> 00:04:17.108
to pozycjonowanie ustalone.

00:04:17.108 --> 00:04:18.765
Będzie wyglądało tak,

00:04:18.765 --> 00:04:20.353
jakby elementy się nie ruszały.

00:04:20.353 --> 00:04:22.096
Żeby to wypróbować,

00:04:22.096 --> 00:04:23.051
zmienimy

00:04:23.051 --> 00:04:25.693
„absolute” na „fixed”
w nagłówku „h1”.

00:04:25.693 --> 00:04:29.073
Zatrzymajcie film
i spróbujcie przewijać.

00:04:29.073 --> 00:04:31.085
Zobaczycie,

00:04:31.085 --> 00:04:33.678
że „Impreza taneczna”
nie zmienia miejsca.

00:04:33.678 --> 00:04:35.667
Bo teraz jej pozycja

00:04:35.667 --> 00:04:39.216
odnosi się do góry ekranu,

00:04:39.216 --> 00:04:40.852
okna.

00:04:40.852 --> 00:04:43.917
No dobrze. Wykorzystaliśmy

00:04:43.917 --> 00:04:45.941
trzy właściwości pozycjonowania

00:04:45.941 --> 00:04:47.697
i zrobiliśmy fajne rzeczy.

00:04:47.697 --> 00:04:48.519
Kiedy używamy

00:04:48.519 --> 00:04:51.071
pozycjonowania bezwzlędnego
lub ustalonego?

00:04:51.071 --> 00:04:53.109
Można je zastosować,

00:04:53.109 --> 00:04:54.183
robiąc grę,

00:04:54.183 --> 00:04:55.693
jak ja tutaj,

00:04:55.693 --> 00:04:57.219
żeby rozłożyć elementy

00:04:57.219 --> 00:04:58.864
scenki w przeglądarce.

00:04:58.864 --> 00:05:00.229
Można też stosować to

00:05:00.229 --> 00:05:01.634
do zwyczajnych stron,

00:05:01.634 --> 00:05:03.026
np. w Khan Academy.

00:05:03.026 --> 00:05:04.383
Pozycjonowanie bezwzględne

00:05:04.383 --> 00:05:06.279
stosujemy do modeli na środku,

00:05:06.279 --> 00:05:07.650
a pozycjonowanie ustalone

00:05:07.650 --> 00:05:08.751
do pola przeszukiwania.

00:05:08.751 --> 00:05:11.813
Zawsze będzie widoczne.

00:05:11.813 --> 00:05:14.232
Nie będziecie używać
pozycjonowania

00:05:14.232 --> 00:05:15.431
na każdej stronie,

00:05:15.431 --> 00:05:16.704
ale jeśli już,

00:05:16.704 --> 00:05:18.967
to będziecie zadowoleni, że można.