0:00:00.000,0:00:02.233
Зараз ми вивчимо, як[br]використовуючи CSS,

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

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

0:00:06.004,0:00:09.024
а справді розміщувати їх один на одному.[br]

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

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

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

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

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

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

0:00:24.212,0:00:26.959
і яку ми називаємо [br]статичне або нормальне розміщення.

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

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

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

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

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

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

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

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

0:00:42.670,0:00:45.621
Спробуймо це зробити на цьому [br]зображенні пейзажу (landscape).

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

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

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

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

0:00:55.407,0:00:57.791
але потім змісти його[br]на певну кількість одиниць".

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

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

0:01:01.501,0:01:03.140
ми маємо використати поєднання

0:01:03.140,0:01:05.179
чотирьох нових властивостей CSS:

0:01:05.179,0:01:07.425
Top (верх), bottom (низ) , left [br](лівий бік), і right (правий бік).

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

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

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

0:01:13.626,0:01:15.222
І ще на 10 пікселів вліво...

0:01:15.222,0:01:16.675
Ми напишемо: left: 10px.

0:01:16.675,0:01:18.668
Це достатньо точно,

0:01:18.668,0:01:20.893
але не ідеально точно.

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

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

0:01:25.077,0:01:26.583
Ми його використовуємо, щоб[br]

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

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

0:01:30.613,0:01:31.664
Щоб зробити це,

0:01:31.664,0:01:32.945
Я зміню "relative"

0:01:32.945,0:01:34.042
на "absolute"

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

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

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

0:01:37.778,0:01:39.213
що тепер пейзаж

0:01:39.213,0:01:41.705
перекрив наші зображення[br]і заголовок "dance party".

0:01:41.705,0:01:42.772
І зараз ми це виправимо.

0:01:42.772,0:01:44.791
Почнімо з Вінстона (winston).

0:01:44.791,0:01:48.456
Ми додамо йому правило

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

0:01:52.096,0:01:54.302
і потім, скажімо,

0:01:54.302,0:01:56.110
верх: 40 пікселів,

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

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

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

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

0:02:04.302,0:02:05.617
залізти наверх.

0:02:05.617,0:02:07.295
Тому ми також дамо Хоперу

0:02:07.295,0:02:11.661
абсолютне розміщення

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

0:02:15.218,0:02:17.814
і зліва: 60 пікселів.

0:02:17.814,0:02:19.613
Добре, моя мета

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

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

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

0:02:26.640,0:02:28.244
тому що Вінстон намальований

0:02:28.244,0:02:30.358
поверх Хопера.

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

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

0:02:33.619,0:02:36.686
тегів в коді HTML.

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

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

0:02:41.647,0:02:43.939
Ми можемо використати її, [br]щоб сказати браузеру,

0:02:43.939,0:02:45.236
в якому саме порядку

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

0:02:46.315,0:02:48.214
надавши їм різні індекси.

0:02:48.247,0:02:50.691
Я почну з пейзажу

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

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

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

0:02:59.054,0:03:00.081
Чудово!

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

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

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

0:03:05.239,0:03:09.991
Але в нас досі є приховані заголовки[br]і текст.

0:03:09.991,0:03:12.450
Тому... спробуймо поставити...

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

0:03:13.942,0:03:16.886
заголовок "Dance party" був зверху[br]над усім.

0:03:16.886,0:03:19.081
Тому я додам йому [br]

0:03:19.081,0:03:20.698
абсолютне розміщення

0:03:20.698,0:03:21.757
і "z-index" 4.

0:03:21.757,0:03:22.997
Так виглядає добре.

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

0:03:24.421,0:03:25.252
Просто пересунемо його трохи.

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

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

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

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

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

0:03:32.816,0:03:35.525
Тому я думаю тут скористатись

0:03:35.525,0:03:38.219
відносним розміщенням

0:03:38.219,0:03:39.468
і потім просто додати[br]значення верху,

0:03:39.468,0:03:40.679
яке, як ви знаєте,

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

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

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

0:03:48.425,0:03:52.189
У нас зараз відбувається справді[br]драйвова вечірка.

0:03:52.189,0:03:55.782
Зараз, якщо ви зупините відео[br]і спробуєте прокрутити сторінку,

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

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

0:04:00.989,0:04:04.116
що абсолютне розміщення є відносним[br]до верху сторінки.

0:04:04.116,0:04:06.017
Тому, коли ви будете[br]прокручувати сторінку вниз,

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

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

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

0:04:14.640,0:04:15.807
Ще однією можливістю

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

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

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

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

0:04:22.097,0:04:23.051
ми можемо просто змінити

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

0:04:25.693,0:04:29.073
А тепер поставте на паузу відео і спробуйте[br]

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

0:04:31.085,0:04:33.678
що напис "Dance party" залишається на одному[br]й тому ж місці.

0:04:33.678,0:04:35.667
Тому що зараз він є відносним

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

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

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

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

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

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

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

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

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

0:04:55.693,0:04:57.219
тому що ви захочете розмістити

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

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

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

0:05:01.634,0:05:03.026
таких як на Khan Academy.

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

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

0:05:06.279,0:05:07.650
а фіксоване розміщення

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

0:05:09.371,0:05:11.803
щоб його завжди було видно[br]під час прокрутки.

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

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

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

0:05:17.154,0:05:19.642
ви будете дуже щасливі, [br]що така можливість існує.

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