[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.00,0:00:02.23,Default,,0000,0000,0000,,Зараз ми вивчимо, як\Nвикористовуючи CSS,
Dialogue: 0,0:00:02.23,0:00:04.23,Default,,0000,0000,0000,,можна переміщати об'єкти.
Dialogue: 0,0:00:04.23,0:00:06.00,Default,,0000,0000,0000,,Не просто ставити їх один біля одного,
Dialogue: 0,0:00:06.00,0:00:09.02,Default,,0000,0000,0000,,а справді розміщувати їх один на одному.\N
Dialogue: 0,0:00:09.03,0:00:11.61,Default,,0000,0000,0000,,Тут ми маємо веб-сторінку
Dialogue: 0,0:00:11.61,0:00:16.04,Default,,0000,0000,0000,,з декількома заголовками, зображеннями
Dialogue: 0,0:00:16.04,0:00:18.07,Default,,0000,0000,0000,,і декількома абзацами ось тут.
Dialogue: 0,0:00:18.07,0:00:20.16,Default,,0000,0000,0000,,І всі вони зараз розставлені
Dialogue: 0,0:00:20.16,0:00:22.18,Default,,0000,0000,0000,,за стандартним принципом розміщення,
Dialogue: 0,0:00:22.18,0:00:24.21,Default,,0000,0000,0000,,яку використовує браузер
Dialogue: 0,0:00:24.21,0:00:26.96,Default,,0000,0000,0000,,і яку ми називаємо \Nстатичне або нормальне розміщення.
Dialogue: 0,0:00:26.96,0:00:29.39,Default,,0000,0000,0000,,Це означає, що рядкові елементи,
Dialogue: 0,0:00:29.39,0:00:30.70,Default,,0000,0000,0000,,такі як зображення,
Dialogue: 0,0:00:30.70,0:00:32.30,Default,,0000,0000,0000,,розміщені зліва направо,
Dialogue: 0,0:00:32.30,0:00:33.80,Default,,0000,0000,0000,,а блокові елементи,
Dialogue: 0,0:00:33.80,0:00:35.49,Default,,0000,0000,0000,,такі як заголовки і абзаци,
Dialogue: 0,0:00:35.49,0:00:37.56,Default,,0000,0000,0000,,розміщені з верху до низу.
Dialogue: 0,0:00:37.56,0:00:39.92,Default,,0000,0000,0000,,Ми можемо змінити цей принцип розміщення
Dialogue: 0,0:00:39.92,0:00:42.67,Default,,0000,0000,0000,,за допомогою властивостей розміщення CSS.
Dialogue: 0,0:00:42.67,0:00:45.62,Default,,0000,0000,0000,,Спробуймо це зробити на цьому \Nзображенні пейзажу (landscape).
Dialogue: 0,0:00:45.62,0:00:49.66,Default,,0000,0000,0000,,Ми напишемо "position" (розміщення),\Nдвокрапку
Dialogue: 0,0:00:49.66,0:00:51.45,Default,,0000,0000,0000,,і значення "relative" (відносний).
Dialogue: 0,0:00:51.45,0:00:53.41,Default,,0000,0000,0000,,Відносний принцип розміщення означає:
Dialogue: 0,0:00:53.41,0:00:55.41,Default,,0000,0000,0000,,"Розмісти його, як зазвичай,
Dialogue: 0,0:00:55.41,0:00:57.79,Default,,0000,0000,0000,,але потім змісти його\Nна певну кількість одиниць".
Dialogue: 0,0:00:57.79,0:01:00.16,Default,,0000,0000,0000,,Щоб сказати браузеру, на яку кількість одиниць
Dialogue: 0,0:01:00.16,0:01:01.50,Default,,0000,0000,0000,,потрібно змістити об'єкт,
Dialogue: 0,0:01:01.50,0:01:03.14,Default,,0000,0000,0000,,ми маємо використати поєднання
Dialogue: 0,0:01:03.14,0:01:05.18,Default,,0000,0000,0000,,чотирьох нових властивостей CSS:
Dialogue: 0,0:01:05.18,0:01:07.42,Default,,0000,0000,0000,,Top (верх), bottom (низ) , left \N(лівий бік), і right (правий бік).
Dialogue: 0,0:01:07.42,0:01:09.44,Default,,0000,0000,0000,,Скажімо, ми хочемо, щоб зображення
Dialogue: 0,0:01:09.44,0:01:11.88,Default,,0000,0000,0000,,було на 20 пікселів нижче.
Dialogue: 0,0:01:11.88,0:01:13.63,Default,,0000,0000,0000,,Напишімо: top: 20 px,
Dialogue: 0,0:01:13.63,0:01:15.22,Default,,0000,0000,0000,,І ще на 10 пікселів вліво...
Dialogue: 0,0:01:15.22,0:01:16.68,Default,,0000,0000,0000,,Ми напишемо: left: 10px.
Dialogue: 0,0:01:16.68,0:01:18.67,Default,,0000,0000,0000,,Це достатньо точно,
Dialogue: 0,0:01:18.67,0:01:20.89,Default,,0000,0000,0000,,але не ідеально точно.
Dialogue: 0,0:01:20.89,0:01:23.47,Default,,0000,0000,0000,,Я хочу показати вам щось значно крутіше.
Dialogue: 0,0:01:23.47,0:01:25.08,Default,,0000,0000,0000,,Абсолютне розміщення.
Dialogue: 0,0:01:25.08,0:01:26.58,Default,,0000,0000,0000,,Ми його використовуємо, щоб\N
Dialogue: 0,0:01:26.58,0:01:28.52,Default,,0000,0000,0000,,забрати елемент зі звичного русла
Dialogue: 0,0:01:28.52,0:01:30.61,Default,,0000,0000,0000,,і поставити його будь-де на екрані.
Dialogue: 0,0:01:30.61,0:01:31.66,Default,,0000,0000,0000,,Щоб зробити це,
Dialogue: 0,0:01:31.66,0:01:32.94,Default,,0000,0000,0000,,Я зміню "relative"
Dialogue: 0,0:01:32.94,0:01:34.04,Default,,0000,0000,0000,,на "absolute"
Dialogue: 0,0:01:34.04,0:01:35.20,Default,,0000,0000,0000,,на цьому пейзажі,
Dialogue: 0,0:01:35.20,0:01:36.58,Default,,0000,0000,0000,,і збережу його у лівому верхньому куті.
Dialogue: 0,0:01:36.58,0:01:37.78,Default,,0000,0000,0000,,І ви можете побачити,
Dialogue: 0,0:01:37.78,0:01:39.21,Default,,0000,0000,0000,,що тепер пейзаж
Dialogue: 0,0:01:39.21,0:01:41.70,Default,,0000,0000,0000,,перекрив наші зображення\Nі заголовок "dance party".
Dialogue: 0,0:01:41.70,0:01:42.77,Default,,0000,0000,0000,,І зараз ми це виправимо.
Dialogue: 0,0:01:42.77,0:01:44.79,Default,,0000,0000,0000,,Почнімо з Вінстона (winston).
Dialogue: 0,0:01:44.79,0:01:48.46,Default,,0000,0000,0000,,Ми додамо йому правило
Dialogue: 0,0:01:48.46,0:01:52.10,Default,,0000,0000,0000,,і напишемо в ньому "position: absolute",
Dialogue: 0,0:01:52.10,0:01:54.30,Default,,0000,0000,0000,,і потім, скажімо,
Dialogue: 0,0:01:54.30,0:01:56.11,Default,,0000,0000,0000,,верх: 40 пікселів,
Dialogue: 0,0:01:56.11,0:01:58.39,Default,,0000,0000,0000,,оу, краще 50 пікселів.
Dialogue: 0,0:01:58.39,0:02:00.06,Default,,0000,0000,0000,,Ліва сторона: 50 пікселів.
Dialogue: 0,0:02:00.06,0:02:02.20,Default,,0000,0000,0000,,Гаразд, так виглядає добре.
Dialogue: 0,0:02:02.20,0:02:04.30,Default,,0000,0000,0000,,І Хопер (hopper) також дуже хоче
Dialogue: 0,0:02:04.30,0:02:05.62,Default,,0000,0000,0000,,залізти наверх.
Dialogue: 0,0:02:05.62,0:02:07.30,Default,,0000,0000,0000,,Тому ми також дамо Хоперу
Dialogue: 0,0:02:07.30,0:02:11.66,Default,,0000,0000,0000,,абсолютне розміщення
Dialogue: 0,0:02:11.66,0:02:15.22,Default,,0000,0000,0000,,і напишемо: верх: 30 пікселів
Dialogue: 0,0:02:15.22,0:02:17.81,Default,,0000,0000,0000,,і зліва: 60 пікселів.
Dialogue: 0,0:02:17.81,0:02:19.61,Default,,0000,0000,0000,,Добре, моя мета
Dialogue: 0,0:02:19.61,0:02:21.22,Default,,0000,0000,0000,,зробити так, наче Хопер
Dialogue: 0,0:02:21.22,0:02:23.74,Default,,0000,0000,0000,,танцює перед Вінстоном.
Dialogue: 0,0:02:23.74,0:02:26.64,Default,,0000,0000,0000,,Але зараз це так не виглядає,
Dialogue: 0,0:02:26.64,0:02:28.24,Default,,0000,0000,0000,,тому що Вінстон намальований
Dialogue: 0,0:02:28.24,0:02:30.36,Default,,0000,0000,0000,,поверх Хопера.
Dialogue: 0,0:02:30.36,0:02:31.95,Default,,0000,0000,0000,,Щоб виправити це,
Dialogue: 0,0:02:31.95,0:02:33.62,Default,,0000,0000,0000,,я можу змінити порядок розміщення
Dialogue: 0,0:02:33.62,0:02:36.69,Default,,0000,0000,0000,,тегів в коді HTML.
Dialogue: 0,0:02:36.69,0:02:38.70,Default,,0000,0000,0000,,Але існує кращий спосіб —
Dialogue: 0,0:02:38.70,0:02:41.65,Default,,0000,0000,0000,,використати властивість CSS "z-index".
Dialogue: 0,0:02:41.65,0:02:43.94,Default,,0000,0000,0000,,Ми можемо використати її, \Nщоб сказати браузеру,
Dialogue: 0,0:02:43.94,0:02:45.24,Default,,0000,0000,0000,,в якому саме порядку
Dialogue: 0,0:02:45.24,0:02:46.32,Default,,0000,0000,0000,,розміщувати елементи,
Dialogue: 0,0:02:46.32,0:02:48.21,Default,,0000,0000,0000,,надавши їм різні індекси.
Dialogue: 0,0:02:48.25,0:02:50.69,Default,,0000,0000,0000,,Я почну з пейзажу
Dialogue: 0,0:02:50.69,0:02:53.27,Default,,0000,0000,0000,,і дам йому "z-index" 1.
Dialogue: 0,0:02:53.27,0:02:56.34,Default,,0000,0000,0000,,Далі йде Вінстон з цифрою 2
Dialogue: 0,0:02:56.34,0:02:59.05,Default,,0000,0000,0000,,і Хопер вилазить нагору з цифрою 3.
Dialogue: 0,0:02:59.05,0:03:00.08,Default,,0000,0000,0000,,Чудово!
Dialogue: 0,0:03:00.08,0:03:02.64,Default,,0000,0000,0000,,Тепер Хопер танцює перед Вінстоном,
Dialogue: 0,0:03:02.64,0:03:04.18,Default,,0000,0000,0000,,навіть якщо останньому це не подобається...
Dialogue: 0,0:03:04.18,0:03:05.24,Default,,0000,0000,0000,,але йому доведеться змиритись.
Dialogue: 0,0:03:05.24,0:03:09.99,Default,,0000,0000,0000,,Але в нас досі є приховані заголовки\Nі текст.
Dialogue: 0,0:03:09.99,0:03:12.45,Default,,0000,0000,0000,,Тому... спробуймо поставити...
Dialogue: 0,0:03:12.45,0:03:13.94,Default,,0000,0000,0000,,Можливо, я хочу, щоб
Dialogue: 0,0:03:13.94,0:03:16.89,Default,,0000,0000,0000,,заголовок "Dance party" був зверху\Nнад усім.
Dialogue: 0,0:03:16.89,0:03:19.08,Default,,0000,0000,0000,,Тому я додам йому \N
Dialogue: 0,0:03:19.08,0:03:20.70,Default,,0000,0000,0000,,абсолютне розміщення
Dialogue: 0,0:03:20.70,0:03:21.76,Default,,0000,0000,0000,,і "z-index" 4.
Dialogue: 0,0:03:21.76,0:03:22.100,Default,,0000,0000,0000,,Так виглядає добре.
Dialogue: 0,0:03:22.100,0:03:24.42,Default,,0000,0000,0000,,Можливо, лівіше на 10 пікселів.
Dialogue: 0,0:03:24.42,0:03:25.25,Default,,0000,0000,0000,,Просто пересунемо його трохи.
Dialogue: 0,0:03:25.25,0:03:26.91,Default,,0000,0000,0000,,Може, трошки більше.
Dialogue: 0,0:03:26.91,0:03:28.52,Default,,0000,0000,0000,,Чудово, так це все має гарний вигляд.
Dialogue: 0,0:03:28.52,0:03:29.69,Default,,0000,0000,0000,,Тепер, слова пісні.
Dialogue: 0,0:03:29.69,0:03:31.11,Default,,0000,0000,0000,,Я насправді хочу,
Dialogue: 0,0:03:31.11,0:03:32.82,Default,,0000,0000,0000,,щоб вони відображалися знизу під всім.
Dialogue: 0,0:03:32.82,0:03:35.52,Default,,0000,0000,0000,,Тому я думаю тут скористатись
Dialogue: 0,0:03:35.52,0:03:38.22,Default,,0000,0000,0000,,відносним розміщенням
Dialogue: 0,0:03:38.22,0:03:39.47,Default,,0000,0000,0000,,і потім просто додати\Nзначення верху,
Dialogue: 0,0:03:39.47,0:03:40.68,Default,,0000,0000,0000,,яке, як ви знаєте,
Dialogue: 0,0:03:40.68,0:03:42.57,Default,,0000,0000,0000,,буде дорівнювати висоті зображення.
Dialogue: 0,0:03:42.57,0:03:45.12,Default,,0000,0000,0000,,Це буде двісті двадцять пікселів.
Dialogue: 0,0:03:45.12,0:03:48.42,Default,,0000,0000,0000,,Гаразд, тепер виглядає справді добре.
Dialogue: 0,0:03:48.42,0:03:52.19,Default,,0000,0000,0000,,У нас зараз відбувається справді\Nдрайвова вечірка.
Dialogue: 0,0:03:52.19,0:03:55.78,Default,,0000,0000,0000,,Зараз, якщо ви зупините відео\Nі спробуєте прокрутити сторінку,
Dialogue: 0,0:03:55.78,0:03:59.22,Default,,0000,0000,0000,,ви побачите, що все прокручується разом.
Dialogue: 0,0:03:59.22,0:04:00.99,Default,,0000,0000,0000,,І важливим є те,
Dialogue: 0,0:04:00.99,0:04:04.12,Default,,0000,0000,0000,,що абсолютне розміщення є відносним\Nдо верху сторінки.
Dialogue: 0,0:04:04.12,0:04:06.02,Default,,0000,0000,0000,,Тому, коли ви будете\Nпрокручувати сторінку вниз,
Dialogue: 0,0:04:06.04,0:04:07.73,Default,,0000,0000,0000,,об'єкти, які мали 10 пікселів зверху,
Dialogue: 0,0:04:07.73,0:04:10.55,Default,,0000,0000,0000,,не залишатимуться на екрані,
Dialogue: 0,0:04:10.55,0:04:14.62,Default,,0000,0000,0000,,тому що ви рухатиметесь далі вниз.
Dialogue: 0,0:04:14.64,0:04:15.81,Default,,0000,0000,0000,,Ще однією можливістю
Dialogue: 0,0:04:15.81,0:04:17.11,Default,,0000,0000,0000,,є фіксоване розміщення (fixed),
Dialogue: 0,0:04:17.11,0:04:18.76,Default,,0000,0000,0000,,яке буде виглядати так, наче
Dialogue: 0,0:04:18.76,0:04:20.35,Default,,0000,0000,0000,,елементи не рухаються взагалі.
Dialogue: 0,0:04:20.35,0:04:22.10,Default,,0000,0000,0000,,І якщо ви хочете це випробувати,
Dialogue: 0,0:04:22.10,0:04:23.05,Default,,0000,0000,0000,,ми можемо просто змінити
Dialogue: 0,0:04:23.05,0:04:25.69,Default,,0000,0000,0000,,h1 з абсолютного на фіксований.
Dialogue: 0,0:04:25.69,0:04:29.07,Default,,0000,0000,0000,,А тепер поставте на паузу відео і спробуйте\N
Dialogue: 0,0:04:29.07,0:04:31.08,Default,,0000,0000,0000,,прокрутити сторінку, і ви побачите,
Dialogue: 0,0:04:31.08,0:04:33.68,Default,,0000,0000,0000,,що напис "Dance party" залишається на одному\Nй тому ж місці.
Dialogue: 0,0:04:33.68,0:04:35.67,Default,,0000,0000,0000,,Тому що зараз він є відносним
Dialogue: 0,0:04:35.67,0:04:40.82,Default,,0000,0000,0000,,до верху самого екрана, вікна.
Dialogue: 0,0:04:40.85,0:04:43.92,Default,,0000,0000,0000,,Гаразд, ми навчились, як використовувати
Dialogue: 0,0:04:43.92,0:04:45.94,Default,,0000,0000,0000,,три різні властивості розміщення,
Dialogue: 0,0:04:45.94,0:04:47.70,Default,,0000,0000,0000,,щоб робити справді класні речі.
Dialogue: 0,0:04:47.70,0:04:49.39,Default,,0000,0000,0000,,Що ж, коли ми використовуємо
Dialogue: 0,0:04:49.39,0:04:51.07,Default,,0000,0000,0000,,абсолютне і фіксоване розміщення?
Dialogue: 0,0:04:51.07,0:04:53.11,Default,,0000,0000,0000,,Ви можете використовувати його,
Dialogue: 0,0:04:53.11,0:04:54.18,Default,,0000,0000,0000,,щоб зробити певну гру,
Dialogue: 0,0:04:54.18,0:04:55.69,Default,,0000,0000,0000,,як я зробила тут,
Dialogue: 0,0:04:55.69,0:04:57.22,Default,,0000,0000,0000,,тому що ви захочете розмістити
Dialogue: 0,0:04:57.22,0:04:58.86,Default,,0000,0000,0000,,усі частини дійства в браузері.
Dialogue: 0,0:04:58.86,0:05:00.23,Default,,0000,0000,0000,,Але ви також можете використовувати їх
Dialogue: 0,0:05:00.23,0:05:01.63,Default,,0000,0000,0000,,і для звичайних веб-сторінок,
Dialogue: 0,0:05:01.63,0:05:03.03,Default,,0000,0000,0000,,таких як на Khan Academy.
Dialogue: 0,0:05:03.03,0:05:04.38,Default,,0000,0000,0000,,Ми використовуємо абсолютне розміщення\Nдля моделей,
Dialogue: 0,0:05:04.38,0:05:06.28,Default,,0000,0000,0000,,які розташовані посередині сторінки,
Dialogue: 0,0:05:06.28,0:05:07.65,Default,,0000,0000,0000,,а фіксоване розміщення
Dialogue: 0,0:05:07.65,0:05:09.37,Default,,0000,0000,0000,,для поля пошуку на сторінці команди,
Dialogue: 0,0:05:09.37,0:05:11.80,Default,,0000,0000,0000,,щоб його завжди було видно\Nпід час прокрутки.
Dialogue: 0,0:05:11.80,0:05:14.23,Default,,0000,0000,0000,,Напевно, ви не будете використовувати
Dialogue: 0,0:05:14.23,0:05:15.69,Default,,0000,0000,0000,,розміщення на кожній сторінці,
Dialogue: 0,0:05:15.69,0:05:17.15,Default,,0000,0000,0000,,але коли використовуватимете,
Dialogue: 0,0:05:17.15,0:05:19.64,Default,,0000,0000,0000,,ви будете дуже щасливі, \Nщо така можливість існує.
Dialogue: 0,0:05:19.64,0:05:23.72,Default,,0000,0000,0000,,Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"