1
00:00:00,000 --> 00:00:02,233
Nauczymy się, jak używać CSS

2
00:00:02,233 --> 00:00:04,233
do przemieszczania elementów.

3
00:00:04,233 --> 00:00:06,004
Nie tylko do szeregowania.

4
00:00:06,004 --> 00:00:07,637
Będziemy nakładać

5
00:00:07,637 --> 00:00:09,029
jedne na drugie.

6
00:00:09,029 --> 00:00:11,611
Tu mamy stronę

7
00:00:11,611 --> 00:00:16,041
z paroma nagłówkami, obrazkami

8
00:00:16,041 --> 00:00:18,069
i akapitami.

9
00:00:18,069 --> 00:00:20,155
Na razie są ułożone

10
00:00:20,155 --> 00:00:22,177
wg pozycjonowania domyślnego,

11
00:00:22,177 --> 00:00:24,212
którego używa przeglądarka.

12
00:00:24,212 --> 00:00:26,959
To tzw. pozycjonowanie
statyczne lub normalne.

13
00:00:26,959 --> 00:00:29,388
Elementy śródliniowe,

14
00:00:29,388 --> 00:00:30,699
np. obrazy,

15
00:00:30,699 --> 00:00:32,296
są ustawione od lewej do prawej,

16
00:00:32,296 --> 00:00:33,800
A elementy blokowe,

17
00:00:33,800 --> 00:00:35,490
np. nagłówki i akapity,

18
00:00:35,490 --> 00:00:37,565
są ułożone pionowo.

19
00:00:37,565 --> 00:00:39,915
Możemy zmienić ten układ,

20
00:00:39,915 --> 00:00:42,670
korzystając z własności CSS
„position” (pozycja).

21
00:00:42,670 --> 00:00:45,621
Wypróbujmy to przy zdjęciu.

22
00:00:45,621 --> 00:00:49,657
Piszemy „position:”,

23
00:00:49,657 --> 00:00:51,446
a potem wartość względną.

24
00:00:51,446 --> 00:00:53,406
W metodzie pozycji względnej

25
00:00:53,406 --> 00:00:55,407
rozmieszczacie elementy normalnie,

26
00:00:55,407 --> 00:00:57,791
a potem przesuwacie o jakąś wartość.

27
00:00:57,791 --> 00:01:00,156
Żeby zawiadomić przeglądarkę

28
00:01:00,156 --> 00:01:01,501
o tej wartości,

29
00:01:01,501 --> 00:01:03,140
użyjemy jakiejś kombinacji

30
00:01:03,140 --> 00:01:05,179
czterech nowych właściwości CSS:

31
00:01:05,179 --> 00:01:07,425
góra, dół, lewo, prawo.

32
00:01:07,425 --> 00:01:09,441
Powiedzmy, że chcemy mieć
nasz element

33
00:01:09,441 --> 00:01:11,875
20 pikseli niżej.

34
00:01:11,875 --> 00:01:13,626
Napiszemy top: 20 pikseli.

35
00:01:13,626 --> 00:01:15,222
Przesuniemy 10 pikseli w bok.

36
00:01:15,222 --> 00:01:16,675
Piszemy: 10 pikseli w lewo.

37
00:01:16,675 --> 00:01:18,668
To jest fajne,

38
00:01:18,668 --> 00:01:20,893
ale nie aż tak.

39
00:01:20,893 --> 00:01:23,472
Pokażę wam coś znacznie lepszego:

40
00:01:23,472 --> 00:01:25,077
pozycjonowanie bezwzględne.

41
00:01:25,077 --> 00:01:26,583
Możemy wyciągnąć element

42
00:01:26,583 --> 00:01:28,525
z układu

43
00:01:28,525 --> 00:01:30,613
i umieścić go gdziekolwiek.

44
00:01:30,613 --> 00:01:31,664
W tym celu

45
00:01:31,664 --> 00:01:32,945
zmienię „relative” (względne)

46
00:01:32,945 --> 00:01:34,042
na „absolute” (bezwzględne)

47
00:01:34,042 --> 00:01:35,199
przy naszym krajobrazie.

48
00:01:35,199 --> 00:01:36,575
Górę i lewą stronę zachowam.

49
00:01:36,575 --> 00:01:37,778
Jak widzicie,

50
00:01:37,778 --> 00:01:39,213
krajobraz zasłania

51
00:01:39,213 --> 00:01:41,705
obrazek i nagłówek
„Impreza taneczna”.

52
00:01:41,705 --> 00:01:42,772
Poprawmy to.

53
00:01:42,772 --> 00:01:44,791
Zacznijmy od Winstona.

54
00:01:44,791 --> 00:01:48,456
Dodamy regułę

55
00:01:48,456 --> 00:01:52,096
pozycjonowania bezwzględnego.

56
00:01:52,096 --> 00:01:54,302
Dajmy, powiedzmy,

57
00:01:54,302 --> 00:01:56,110
„góra: 40 pikseli”.

58
00:01:56,110 --> 00:01:58,394
Albo niech będzie 50.

59
00:01:58,394 --> 00:02:00,055
I lewa 50.

60
00:02:00,055 --> 00:02:02,204
Dobrze to wygląda.

61
00:02:02,204 --> 00:02:04,302
Hopper (Skacząca)
chce być na wierzchu.

62
00:02:04,302 --> 00:02:05,617
Ona także.

63
00:02:05,617 --> 00:02:07,295
Jej też określimy

64
00:02:07,295 --> 00:02:11,661
pozycję bezwzględną.

65
00:02:11,661 --> 00:02:15,218
Powiedzmy, góra: 30 pikseli,

66
00:02:15,218 --> 00:02:17,814
a lewa: 60 pikseli.

67
00:02:17,814 --> 00:02:19,613
Niech to sprawia wrażenie,

68
00:02:19,613 --> 00:02:21,216
jakby Hopper

69
00:02:21,216 --> 00:02:23,743
tańczyła przed Winstonem.

70
00:02:23,743 --> 00:02:26,640
Na razie tak to nie wygląda,

71
00:02:26,640 --> 00:02:28,244
bo Winston znajduje się

72
00:02:28,244 --> 00:02:30,358
na wierzchu.

73
00:02:30,358 --> 00:02:31,948
Żeby to poprawić,

74
00:02:31,948 --> 00:02:33,619
mogłabym zmienić kolejność

75
00:02:33,619 --> 00:02:35,136
znaczników „image”

76
00:02:35,136 --> 00:02:36,684
w HTML-u,

77
00:02:36,684 --> 00:02:38,699
lepiej jednak będzie

78
00:02:38,699 --> 00:02:42,257
skorzystać z właściwości CSS
„z-index”.

79
00:02:42,257 --> 00:02:43,939
Powiemy przeglądarce,

80
00:02:43,939 --> 00:02:45,236
w jakiej kolejności

81
00:02:45,236 --> 00:02:46,035
ustawiać elementy,

82
00:02:46,035 --> 00:02:47,384
nadając im

83
00:02:47,384 --> 00:02:48,247
z-indeksy.

84
00:02:48,247 --> 00:02:50,691
Zacznijmy od krajobrazu

85
00:02:50,691 --> 00:02:53,268
i nadajmy mu numer 1.

86
00:02:53,268 --> 00:02:56,345
Na to - Winston z dwójką,

87
00:02:56,345 --> 00:02:59,054
a na wierzch Hopper, trzecia.

88
00:02:59,054 --> 00:03:00,081
Dobrze!

89
00:03:00,081 --> 00:03:02,641
Teraz Hopper
tańczy przed Winstonem,

90
00:03:02,641 --> 00:03:04,178
chociaż nie ma ochoty.

91
00:03:04,178 --> 00:03:05,239
Trudno, musi!

92
00:03:05,239 --> 00:03:07,801
Jednak niektóre nagłówki

93
00:03:07,801 --> 00:03:09,991
i kolumny są ukryte.

94
00:03:09,991 --> 00:03:12,450
Spróbujmy…

95
00:03:12,450 --> 00:03:13,942
chcę umieścić nagłówek

96
00:03:13,942 --> 00:03:16,886
„Impreza taneczna” na wierzchu.

97
00:03:16,886 --> 00:03:19,081
Określę więc dla niego

98
00:03:19,081 --> 00:03:20,698
pozycję bezwzględną

99
00:03:20,698 --> 00:03:21,757
i nadam mu numer 4.

100
00:03:21,757 --> 00:03:22,997
Dobrze.

101
00:03:22,997 --> 00:03:24,421
Może 10 pikseli w lewo.

102
00:03:24,421 --> 00:03:25,252
Przesunę.

103
00:03:25,252 --> 00:03:26,912
Może jeszcze trochę.

104
00:03:26,912 --> 00:03:28,518
Teraz dobrze.

105
00:03:28,518 --> 00:03:29,688
A tekst piosenki

106
00:03:29,688 --> 00:03:31,113
niech wyświetla się

107
00:03:31,113 --> 00:03:32,816
poniżej całej reszty.

108
00:03:32,816 --> 00:03:35,525
Dla tych elementów

109
00:03:35,525 --> 00:03:38,219
określę pozycję bezwzględną.

110
00:03:38,219 --> 00:03:39,468
Można określić tylko górę,

111
00:03:39,468 --> 00:03:40,679
która, jak wiecie,

112
00:03:40,679 --> 00:03:42,574
będzie równa wysokości obrazka.

113
00:03:42,574 --> 00:03:45,119
To 220 pikseli.

114
00:03:45,119 --> 00:03:48,425
Teraz wygląda to dobrze.

115
00:03:48,425 --> 00:03:50,129
Szalona impreza taneczna

116
00:03:50,129 --> 00:03:52,179
na całego!

117
00:03:52,179 --> 00:03:53,822
Zatrzymajcie teraz film

118
00:03:53,822 --> 00:03:55,770
i spróbujcie przewinąć w dół.

119
00:03:55,770 --> 00:03:58,051
Zobaczycie, że wszystko

120
00:03:58,051 --> 00:03:59,209
przewija się razem.

121
00:03:59,209 --> 00:04:00,989
Ważna sprawa:

122
00:04:00,989 --> 00:04:02,616
pozycjonowanie absolutne

123
00:04:02,616 --> 00:04:04,053
odnosi się do góry strony.

124
00:04:04,053 --> 00:04:06,017
Gdy więc przewijacie,

125
00:04:06,040 --> 00:04:07,733
to, co było 10 pikseli od góry,

126
00:04:07,733 --> 00:04:10,550
zniknie z ekranu,

127
00:04:10,550 --> 00:04:11,919
bo oddalacie się

128
00:04:11,919 --> 00:04:14,640
od góry strony.

129
00:04:14,640 --> 00:04:15,807
Inna możliwość

130
00:04:15,807 --> 00:04:17,108
to pozycjonowanie ustalone.

131
00:04:17,108 --> 00:04:18,765
Będzie wyglądało tak,

132
00:04:18,765 --> 00:04:20,353
jakby elementy się nie ruszały.

133
00:04:20,353 --> 00:04:22,096
Żeby to wypróbować,

134
00:04:22,096 --> 00:04:23,051
zmienimy

135
00:04:23,051 --> 00:04:25,693
„absolute” na „fixed”
w nagłówku „h1”.

136
00:04:25,693 --> 00:04:29,073
Zatrzymajcie film
i spróbujcie przewijać.

137
00:04:29,073 --> 00:04:31,085
Zobaczycie,

138
00:04:31,085 --> 00:04:33,678
że „Impreza taneczna”
nie zmienia miejsca.

139
00:04:33,678 --> 00:04:35,667
Bo teraz jej pozycja

140
00:04:35,667 --> 00:04:39,216
odnosi się do góry ekranu,

141
00:04:39,216 --> 00:04:40,852
okna.

142
00:04:40,852 --> 00:04:43,917
No dobrze. Wykorzystaliśmy

143
00:04:43,917 --> 00:04:45,941
trzy właściwości pozycjonowania

144
00:04:45,941 --> 00:04:47,697
i zrobiliśmy fajne rzeczy.

145
00:04:47,697 --> 00:04:48,519
Kiedy używamy

146
00:04:48,519 --> 00:04:51,071
pozycjonowania bezwzlędnego
lub ustalonego?

147
00:04:51,071 --> 00:04:53,109
Można je zastosować,

148
00:04:53,109 --> 00:04:54,183
robiąc grę,

149
00:04:54,183 --> 00:04:55,693
jak ja tutaj,

150
00:04:55,693 --> 00:04:57,219
żeby rozłożyć elementy

151
00:04:57,219 --> 00:04:58,864
scenki w przeglądarce.

152
00:04:58,864 --> 00:05:00,229
Można też stosować to

153
00:05:00,229 --> 00:05:01,634
do zwyczajnych stron,

154
00:05:01,634 --> 00:05:03,026
np. w Khan Academy.

155
00:05:03,026 --> 00:05:04,383
Pozycjonowanie bezwzględne

156
00:05:04,383 --> 00:05:06,279
stosujemy do modeli na środku,

157
00:05:06,279 --> 00:05:07,650
a pozycjonowanie ustalone

158
00:05:07,650 --> 00:05:08,751
do pola przeszukiwania.

159
00:05:08,751 --> 00:05:11,813
Zawsze będzie widoczne.

160
00:05:11,813 --> 00:05:14,232
Nie będziecie używać
pozycjonowania

161
00:05:14,232 --> 00:05:15,431
na każdej stronie,

162
00:05:15,431 --> 00:05:16,704
ale jeśli już,

163
00:05:16,704 --> 00:05:18,967
to będziecie zadowoleni, że można.