WEBVTT

00:00:00.000 --> 00:00:02.233
Зараз ми вивчимо, як
використовуючи CSS,

00:00:02.233 --> 00:00:04.233
можна переміщати об'єкти.

00:00:04.233 --> 00:00:06.004
Не просто ставити їх один біля одного,

00:00:06.004 --> 00:00:09.024
а справді розміщувати їх один на одному.


00:00:09.029 --> 00:00:11.611
Тут ми маємо веб-сторінку

00:00:11.611 --> 00:00:16.041
з декількома заголовками, зображеннями

00:00:16.041 --> 00:00:18.069
і декількома абзацами ось тут.

00:00:18.069 --> 00:00:20.155
І всі вони зараз розставлені

00:00:20.155 --> 00:00:22.177
за стандартним принципом розміщення,

00:00:22.177 --> 00:00:24.212
яку використовує браузер

00:00:24.212 --> 00:00:26.959
і яку ми називаємо 
статичне або нормальне розміщення.

00:00:26.959 --> 00:00:29.388
Це означає, що рядкові елементи,

00:00:29.388 --> 00:00:30.699
такі як зображення,

00:00:30.699 --> 00:00:32.297
розміщені зліва направо,

00:00:32.297 --> 00:00:33.800
а блокові елементи,

00:00:33.800 --> 00:00:35.490
такі як заголовки і абзаци,

00:00:35.490 --> 00:00:37.565
розміщені з верху до низу.

00:00:37.565 --> 00:00:39.915
Ми можемо змінити цей принцип розміщення

00:00:39.915 --> 00:00:42.670
за допомогою властивостей розміщення CSS.

00:00:42.670 --> 00:00:45.621
Спробуймо це зробити на цьому 
зображенні пейзажу (landscape).

00:00:45.621 --> 00:00:49.657
Ми напишемо "position" (розміщення),
двокрапку

00:00:49.657 --> 00:00:51.446
і значення "relative" (відносний).

00:00:51.446 --> 00:00:53.406
Відносний принцип розміщення означає:

00:00:53.406 --> 00:00:55.407
"Розмісти його, як зазвичай,

00:00:55.407 --> 00:00:57.791
але потім змісти його
на певну кількість одиниць".

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

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

00:01:01.501 --> 00:01:03.140
ми маємо використати поєднання

00:01:03.140 --> 00:01:05.179
чотирьох нових властивостей CSS:

00:01:05.179 --> 00:01:07.425
Top (верх), bottom (низ) , left 
(лівий бік), і right (правий бік).

00:01:07.425 --> 00:01:09.441
Скажімо, ми хочемо, щоб зображення

00:01:09.441 --> 00:01:11.875
було на 20 пікселів нижче.

00:01:11.875 --> 00:01:13.626
Напишімо: top: 20 px,

00:01:13.626 --> 00:01:15.222
І ще на 10 пікселів вліво...

00:01:15.222 --> 00:01:16.675
Ми напишемо: left: 10px.

00:01:16.675 --> 00:01:18.668
Це достатньо точно,

00:01:18.668 --> 00:01:20.893
але не ідеально точно.

00:01:20.893 --> 00:01:23.472
Я хочу показати вам щось значно крутіше.

00:01:23.472 --> 00:01:25.077
Абсолютне розміщення.

00:01:25.077 --> 00:01:26.583
Ми його використовуємо, щоб


00:01:26.583 --> 00:01:28.525
забрати елемент зі звичного русла

00:01:28.525 --> 00:01:30.613
і поставити його будь-де на екрані.

00:01:30.613 --> 00:01:31.664
Щоб зробити це,

00:01:31.664 --> 00:01:32.945
Я зміню "relative"

00:01:32.945 --> 00:01:34.042
на "absolute"

00:01:34.042 --> 00:01:35.199
на цьому пейзажі,

00:01:35.199 --> 00:01:36.575
і збережу його у лівому верхньому куті.

00:01:36.575 --> 00:01:37.778
І ви можете побачити,

00:01:37.778 --> 00:01:39.213
що тепер пейзаж

00:01:39.213 --> 00:01:41.705
перекрив наші зображення
і заголовок "dance party".

00:01:41.705 --> 00:01:42.772
І зараз ми це виправимо.

00:01:42.772 --> 00:01:44.791
Почнімо з Вінстона (winston).

00:01:44.791 --> 00:01:48.456
Ми додамо йому правило

00:01:48.456 --> 00:01:52.096
і напишемо в ньому "position: absolute",

00:01:52.096 --> 00:01:54.302
і потім, скажімо,

00:01:54.302 --> 00:01:56.110
верх: 40 пікселів,

00:01:56.110 --> 00:01:58.394
оу, краще 50 пікселів.

00:01:58.394 --> 00:02:00.055
Ліва сторона: 50 пікселів.

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

00:02:02.204 --> 00:02:04.302
І Хопер (hopper) також дуже хоче

00:02:04.302 --> 00:02:05.617
залізти наверх.

00:02:05.617 --> 00:02:07.295
Тому ми також дамо Хоперу

00:02:07.295 --> 00:02:11.661
абсолютне розміщення

00:02:11.661 --> 00:02:15.218
і напишемо: верх: 30 пікселів

00:02:15.218 --> 00:02:17.814
і зліва: 60 пікселів.

00:02:17.814 --> 00:02:19.613
Добре, моя мета

00:02:19.613 --> 00:02:21.216
зробити так, наче Хопер

00:02:21.216 --> 00:02:23.743
танцює перед Вінстоном.

00:02:23.743 --> 00:02:26.640
Але зараз це так не виглядає,

00:02:26.640 --> 00:02:28.244
тому що Вінстон намальований

00:02:28.244 --> 00:02:30.358
поверх Хопера.

00:02:30.358 --> 00:02:31.948
Щоб виправити це,

00:02:31.948 --> 00:02:33.619
я можу змінити порядок розміщення

00:02:33.619 --> 00:02:36.686
тегів в коді HTML.

00:02:36.686 --> 00:02:38.699
Але існує кращий спосіб —

00:02:38.699 --> 00:02:41.647
використати властивість CSS "z-index".

00:02:41.647 --> 00:02:43.939
Ми можемо використати її, 
щоб сказати браузеру,

00:02:43.939 --> 00:02:45.236
в якому саме порядку

00:02:45.236 --> 00:02:46.315
розміщувати елементи,

00:02:46.315 --> 00:02:48.214
надавши їм різні індекси.

00:02:48.247 --> 00:02:50.691
Я почну з пейзажу

00:02:50.691 --> 00:02:53.268
і дам йому "z-index" 1.

00:02:53.268 --> 00:02:56.345
Далі йде Вінстон з цифрою 2

00:02:56.345 --> 00:02:59.054
і Хопер вилазить нагору з цифрою 3.

00:02:59.054 --> 00:03:00.081
Чудово!

00:03:00.081 --> 00:03:02.641
Тепер Хопер танцює перед Вінстоном,

00:03:02.641 --> 00:03:04.178
навіть якщо останньому це не подобається...

00:03:04.178 --> 00:03:05.239
але йому доведеться змиритись.

00:03:05.239 --> 00:03:09.991
Але в нас досі є приховані заголовки
і текст.

00:03:09.991 --> 00:03:12.450
Тому... спробуймо поставити...

00:03:12.450 --> 00:03:13.942
Можливо, я хочу, щоб

00:03:13.942 --> 00:03:16.886
заголовок "Dance party" був зверху
над усім.

00:03:16.886 --> 00:03:19.081
Тому я додам йому 


00:03:19.081 --> 00:03:20.698
абсолютне розміщення

00:03:20.698 --> 00:03:21.757
і "z-index" 4.

00:03:21.757 --> 00:03:22.997
Так виглядає добре.

00:03:22.997 --> 00:03:24.421
Можливо, лівіше на 10 пікселів.

00:03:24.421 --> 00:03:25.252
Просто пересунемо його трохи.

00:03:25.252 --> 00:03:26.912
Може, трошки більше.

00:03:26.912 --> 00:03:28.518
Чудово, так це все має гарний вигляд.

00:03:28.518 --> 00:03:29.688
Тепер, слова пісні.

00:03:29.688 --> 00:03:31.113
Я насправді хочу,

00:03:31.113 --> 00:03:32.816
щоб вони відображалися знизу під всім.

00:03:32.816 --> 00:03:35.525
Тому я думаю тут скористатись

00:03:35.525 --> 00:03:38.219
відносним розміщенням

00:03:38.219 --> 00:03:39.468
і потім просто додати
значення верху,

00:03:39.468 --> 00:03:40.679
яке, як ви знаєте,

00:03:40.679 --> 00:03:42.574
буде дорівнювати висоті зображення.

00:03:42.574 --> 00:03:45.119
Це буде двісті двадцять пікселів.

00:03:45.119 --> 00:03:48.425
Гаразд, тепер виглядає справді добре.

00:03:48.425 --> 00:03:52.189
У нас зараз відбувається справді
драйвова вечірка.

00:03:52.189 --> 00:03:55.782
Зараз, якщо ви зупините відео
і спробуєте прокрутити сторінку,

00:03:55.782 --> 00:03:59.221
ви побачите, що все прокручується разом.

00:03:59.221 --> 00:04:00.989
І важливим є те,

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

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

00:04:06.040 --> 00:04:07.733
об'єкти, які мали 10 пікселів зверху,

00:04:07.733 --> 00:04:10.550
не залишатимуться на екрані,

00:04:10.550 --> 00:04:14.619
тому що ви рухатиметесь далі вниз.

00:04:14.640 --> 00:04:15.807
Ще однією можливістю

00:04:15.807 --> 00:04:17.109
є фіксоване розміщення (fixed),

00:04:17.109 --> 00:04:18.765
яке буде виглядати так, наче

00:04:18.765 --> 00:04:20.354
елементи не рухаються взагалі.

00:04:20.354 --> 00:04:22.097
І якщо ви хочете це випробувати,

00:04:22.097 --> 00:04:23.051
ми можемо просто змінити

00:04:23.051 --> 00:04:25.693
h1 з абсолютного на фіксований.

00:04:25.693 --> 00:04:29.073
А тепер поставте на паузу відео і спробуйте


00:04:29.073 --> 00:04:31.085
прокрутити сторінку, і ви побачите,

00:04:31.085 --> 00:04:33.678
що напис "Dance party" залишається на одному
й тому ж місці.

00:04:33.678 --> 00:04:35.667
Тому що зараз він є відносним

00:04:35.667 --> 00:04:40.816
до верху самого екрана, вікна.

00:04:40.852 --> 00:04:43.917
Гаразд, ми навчились, як використовувати

00:04:43.917 --> 00:04:45.941
три різні властивості розміщення,

00:04:45.941 --> 00:04:47.697
щоб робити справді класні речі.

00:04:47.697 --> 00:04:49.389
Що ж, коли ми використовуємо

00:04:49.389 --> 00:04:51.071
абсолютне і фіксоване розміщення?

00:04:51.071 --> 00:04:53.109
Ви можете використовувати його,

00:04:53.109 --> 00:04:54.183
щоб зробити певну гру,

00:04:54.183 --> 00:04:55.693
як я зробила тут,

00:04:55.693 --> 00:04:57.219
тому що ви захочете розмістити

00:04:57.219 --> 00:04:58.864
усі частини дійства в браузері.

00:04:58.864 --> 00:05:00.229
Але ви також можете використовувати їх

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

00:05:01.634 --> 00:05:03.026
таких як на Khan Academy.

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

00:05:04.383 --> 00:05:06.279
які розташовані посередині сторінки,

00:05:06.279 --> 00:05:07.650
а фіксоване розміщення

00:05:07.650 --> 00:05:09.371
для поля пошуку на сторінці команди,

00:05:09.371 --> 00:05:11.803
щоб його завжди було видно
під час прокрутки.

00:05:11.803 --> 00:05:14.232
Напевно, ви не будете використовувати

00:05:14.232 --> 00:05:15.691
розміщення на кожній сторінці,

00:05:15.691 --> 00:05:17.154
але коли використовуватимете,

00:05:17.154 --> 00:05:19.642
ви будете дуже щасливі, 
що така можливість існує.

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