1
00:00:00,000 --> 00:00:02,233
Зараз ми вивчимо, як
використовуючи CSS,

2
00:00:02,233 --> 00:00:04,233
можна переміщати об'єкти.

3
00:00:04,233 --> 00:00:06,004
Не просто ставити їх один біля одного,

4
00:00:06,004 --> 00:00:09,024
а справді розміщувати їх один на одному.


5
00:00:09,029 --> 00:00:11,611
Тут ми маємо веб-сторінку

6
00:00:11,611 --> 00:00:16,041
з декількома заголовками, зображеннями

7
00:00:16,041 --> 00:00:18,069
і декількома абзацами ось тут.

8
00:00:18,069 --> 00:00:20,155
І всі вони зараз розставлені

9
00:00:20,155 --> 00:00:22,177
за стандартним принципом розміщення,

10
00:00:22,177 --> 00:00:24,212
яку використовує браузер

11
00:00:24,212 --> 00:00:26,959
і яку ми називаємо 
статичне або нормальне розміщення.

12
00:00:26,959 --> 00:00:29,388
Це означає, що рядкові елементи,

13
00:00:29,388 --> 00:00:30,699
такі як зображення,

14
00:00:30,699 --> 00:00:32,297
розміщені зліва направо,

15
00:00:32,297 --> 00:00:33,800
а блокові елементи,

16
00:00:33,800 --> 00:00:35,490
такі як заголовки і абзаци,

17
00:00:35,490 --> 00:00:37,565
розміщені з верху до низу.

18
00:00:37,565 --> 00:00:39,915
Ми можемо змінити цей принцип розміщення

19
00:00:39,915 --> 00:00:42,670
за допомогою властивостей розміщення CSS.

20
00:00:42,670 --> 00:00:45,621
Спробуймо це зробити на цьому 
зображенні пейзажу (landscape).

21
00:00:45,621 --> 00:00:49,657
Ми напишемо "position" (розміщення),
двокрапку

22
00:00:49,657 --> 00:00:51,446
і значення "relative" (відносний).

23
00:00:51,446 --> 00:00:53,406
Відносний принцип розміщення означає:

24
00:00:53,406 --> 00:00:55,407
"Розмісти його, як зазвичай,

25
00:00:55,407 --> 00:00:57,791
але потім змісти його
на певну кількість одиниць".

26
00:00:57,791 --> 00:01:00,156
Щоб сказати браузеру, на яку кількість одиниць

27
00:01:00,156 --> 00:01:01,501
потрібно змістити об'єкт,

28
00:01:01,501 --> 00:01:03,140
ми маємо використати поєднання

29
00:01:03,140 --> 00:01:05,179
чотирьох нових властивостей CSS:

30
00:01:05,179 --> 00:01:07,425
Top (верх), bottom (низ) , left 
(лівий бік), і right (правий бік).

31
00:01:07,425 --> 00:01:09,441
Скажімо, ми хочемо, щоб зображення

32
00:01:09,441 --> 00:01:11,875
було на 20 пікселів нижче.

33
00:01:11,875 --> 00:01:13,626
Напишімо: top: 20 px,

34
00:01:13,626 --> 00:01:15,222
І ще на 10 пікселів вліво...

35
00:01:15,222 --> 00:01:16,675
Ми напишемо: left: 10px.

36
00:01:16,675 --> 00:01:18,668
Це достатньо точно,

37
00:01:18,668 --> 00:01:20,893
але не ідеально точно.

38
00:01:20,893 --> 00:01:23,472
Я хочу показати вам щось значно крутіше.

39
00:01:23,472 --> 00:01:25,077
Абсолютне розміщення.

40
00:01:25,077 --> 00:01:26,583
Ми його використовуємо, щоб


41
00:01:26,583 --> 00:01:28,525
забрати елемент зі звичного русла

42
00:01:28,525 --> 00:01:30,613
і поставити його будь-де на екрані.

43
00:01:30,613 --> 00:01:31,664
Щоб зробити це,

44
00:01:31,664 --> 00:01:32,945
Я зміню "relative"

45
00:01:32,945 --> 00:01:34,042
на "absolute"

46
00:01:34,042 --> 00:01:35,199
на цьому пейзажі,

47
00:01:35,199 --> 00:01:36,575
і збережу його у лівому верхньому куті.

48
00:01:36,575 --> 00:01:37,778
І ви можете побачити,

49
00:01:37,778 --> 00:01:39,213
що тепер пейзаж

50
00:01:39,213 --> 00:01:41,705
перекрив наші зображення
і заголовок "dance party".

51
00:01:41,705 --> 00:01:42,772
І зараз ми це виправимо.

52
00:01:42,772 --> 00:01:44,791
Почнімо з Вінстона (winston).

53
00:01:44,791 --> 00:01:48,456
Ми додамо йому правило

54
00:01:48,456 --> 00:01:52,096
і напишемо в ньому "position: absolute",

55
00:01:52,096 --> 00:01:54,302
і потім, скажімо,

56
00:01:54,302 --> 00:01:56,110
верх: 40 пікселів,

57
00:01:56,110 --> 00:01:58,394
оу, краще 50 пікселів.

58
00:01:58,394 --> 00:02:00,055
Ліва сторона: 50 пікселів.

59
00:02:00,055 --> 00:02:02,204
Гаразд, так виглядає добре.

60
00:02:02,204 --> 00:02:04,302
І Хопер (hopper) також дуже хоче

61
00:02:04,302 --> 00:02:05,617
залізти наверх.

62
00:02:05,617 --> 00:02:07,295
Тому ми також дамо Хоперу

63
00:02:07,295 --> 00:02:11,661
абсолютне розміщення

64
00:02:11,661 --> 00:02:15,218
і напишемо: верх: 30 пікселів

65
00:02:15,218 --> 00:02:17,814
і зліва: 60 пікселів.

66
00:02:17,814 --> 00:02:19,613
Добре, моя мета

67
00:02:19,613 --> 00:02:21,216
зробити так, наче Хопер

68
00:02:21,216 --> 00:02:23,743
танцює перед Вінстоном.

69
00:02:23,743 --> 00:02:26,640
Але зараз це так не виглядає,

70
00:02:26,640 --> 00:02:28,244
тому що Вінстон намальований

71
00:02:28,244 --> 00:02:30,358
поверх Хопера.

72
00:02:30,358 --> 00:02:31,948
Щоб виправити це,

73
00:02:31,948 --> 00:02:33,619
я можу змінити порядок розміщення

74
00:02:33,619 --> 00:02:36,686
тегів в коді HTML.

75
00:02:36,686 --> 00:02:38,699
Але існує кращий спосіб —

76
00:02:38,699 --> 00:02:41,647
використати властивість CSS "z-index".

77
00:02:41,647 --> 00:02:43,939
Ми можемо використати її, 
щоб сказати браузеру,

78
00:02:43,939 --> 00:02:45,236
в якому саме порядку

79
00:02:45,236 --> 00:02:46,315
розміщувати елементи,

80
00:02:46,315 --> 00:02:48,214
надавши їм різні індекси.

81
00:02:48,247 --> 00:02:50,691
Я почну з пейзажу

82
00:02:50,691 --> 00:02:53,268
і дам йому "z-index" 1.

83
00:02:53,268 --> 00:02:56,345
Далі йде Вінстон з цифрою 2

84
00:02:56,345 --> 00:02:59,054
і Хопер вилазить нагору з цифрою 3.

85
00:02:59,054 --> 00:03:00,081
Чудово!

86
00:03:00,081 --> 00:03:02,641
Тепер Хопер танцює перед Вінстоном,

87
00:03:02,641 --> 00:03:04,178
навіть якщо останньому це не подобається...

88
00:03:04,178 --> 00:03:05,239
але йому доведеться змиритись.

89
00:03:05,239 --> 00:03:09,991
Але в нас досі є приховані заголовки
і текст.

90
00:03:09,991 --> 00:03:12,450
Тому... спробуймо поставити...

91
00:03:12,450 --> 00:03:13,942
Можливо, я хочу, щоб

92
00:03:13,942 --> 00:03:16,886
заголовок "Dance party" був зверху
над усім.

93
00:03:16,886 --> 00:03:19,081
Тому я додам йому 


94
00:03:19,081 --> 00:03:20,698
абсолютне розміщення

95
00:03:20,698 --> 00:03:21,757
і "z-index" 4.

96
00:03:21,757 --> 00:03:22,997
Так виглядає добре.

97
00:03:22,997 --> 00:03:24,421
Можливо, лівіше на 10 пікселів.

98
00:03:24,421 --> 00:03:25,252
Просто пересунемо його трохи.

99
00:03:25,252 --> 00:03:26,912
Може, трошки більше.

100
00:03:26,912 --> 00:03:28,518
Чудово, так це все має гарний вигляд.

101
00:03:28,518 --> 00:03:29,688
Тепер, слова пісні.

102
00:03:29,688 --> 00:03:31,113
Я насправді хочу,

103
00:03:31,113 --> 00:03:32,816
щоб вони відображалися знизу під всім.

104
00:03:32,816 --> 00:03:35,525
Тому я думаю тут скористатись

105
00:03:35,525 --> 00:03:38,219
відносним розміщенням

106
00:03:38,219 --> 00:03:39,468
і потім просто додати
значення верху,

107
00:03:39,468 --> 00:03:40,679
яке, як ви знаєте,

108
00:03:40,679 --> 00:03:42,574
буде дорівнювати висоті зображення.

109
00:03:42,574 --> 00:03:45,119
Це буде двісті двадцять пікселів.

110
00:03:45,119 --> 00:03:48,425
Гаразд, тепер виглядає справді добре.

111
00:03:48,425 --> 00:03:52,189
У нас зараз відбувається справді
драйвова вечірка.

112
00:03:52,189 --> 00:03:55,782
Зараз, якщо ви зупините відео
і спробуєте прокрутити сторінку,

113
00:03:55,782 --> 00:03:59,221
ви побачите, що все прокручується разом.

114
00:03:59,221 --> 00:04:00,989
І важливим є те,

115
00:04:00,989 --> 00:04:04,116
що абсолютне розміщення є відносним
до верху сторінки.

116
00:04:04,116 --> 00:04:06,017
Тому, коли ви будете
прокручувати сторінку вниз,

117
00:04:06,040 --> 00:04:07,733
об'єкти, які мали 10 пікселів зверху,

118
00:04:07,733 --> 00:04:10,550
не залишатимуться на екрані,

119
00:04:10,550 --> 00:04:14,619
тому що ви рухатиметесь далі вниз.

120
00:04:14,640 --> 00:04:15,807
Ще однією можливістю

121
00:04:15,807 --> 00:04:17,109
є фіксоване розміщення (fixed),

122
00:04:17,109 --> 00:04:18,765
яке буде виглядати так, наче

123
00:04:18,765 --> 00:04:20,354
елементи не рухаються взагалі.

124
00:04:20,354 --> 00:04:22,097
І якщо ви хочете це випробувати,

125
00:04:22,097 --> 00:04:23,051
ми можемо просто змінити

126
00:04:23,051 --> 00:04:25,693
h1 з абсолютного на фіксований.

127
00:04:25,693 --> 00:04:29,073
А тепер поставте на паузу відео і спробуйте


128
00:04:29,073 --> 00:04:31,085
прокрутити сторінку, і ви побачите,

129
00:04:31,085 --> 00:04:33,678
що напис "Dance party" залишається на одному
й тому ж місці.

130
00:04:33,678 --> 00:04:35,667
Тому що зараз він є відносним

131
00:04:35,667 --> 00:04:40,816
до верху самого екрана, вікна.

132
00:04:40,852 --> 00:04:43,917
Гаразд, ми навчились, як використовувати

133
00:04:43,917 --> 00:04:45,941
три різні властивості розміщення,

134
00:04:45,941 --> 00:04:47,697
щоб робити справді класні речі.

135
00:04:47,697 --> 00:04:49,389
Що ж, коли ми використовуємо

136
00:04:49,389 --> 00:04:51,071
абсолютне і фіксоване розміщення?

137
00:04:51,071 --> 00:04:53,109
Ви можете використовувати його,

138
00:04:53,109 --> 00:04:54,183
щоб зробити певну гру,

139
00:04:54,183 --> 00:04:55,693
як я зробила тут,

140
00:04:55,693 --> 00:04:57,219
тому що ви захочете розмістити

141
00:04:57,219 --> 00:04:58,864
усі частини дійства в браузері.

142
00:04:58,864 --> 00:05:00,229
Але ви також можете використовувати їх

143
00:05:00,229 --> 00:05:01,634
і для звичайних веб-сторінок,

144
00:05:01,634 --> 00:05:03,026
таких як на Khan Academy.

145
00:05:03,026 --> 00:05:04,383
Ми використовуємо абсолютне розміщення
для моделей,

146
00:05:04,383 --> 00:05:06,279
які розташовані посередині сторінки,

147
00:05:06,279 --> 00:05:07,650
а фіксоване розміщення

148
00:05:07,650 --> 00:05:09,371
для поля пошуку на сторінці команди,

149
00:05:09,371 --> 00:05:11,803
щоб його завжди було видно
під час прокрутки.

150
00:05:11,803 --> 00:05:14,232
Напевно, ви не будете використовувати

151
00:05:14,232 --> 00:05:15,691
розміщення на кожній сторінці,

152
00:05:15,691 --> 00:05:17,154
але коли використовуватимете,

153
00:05:17,154 --> 00:05:19,642
ви будете дуже щасливі, 
що така можливість існує.

154
00:05:19,642 --> 00:05:23,722
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"