Return to Video

Розміщення елементів в CSS

  • 0:00 - 0:02
    Зараз ми вивчимо, як
    використовуючи CSS,
  • 0:02 - 0:04
    можна переміщати об'єкти.
  • 0:04 - 0:06
    Не просто ставити їх один біля одного,
  • 0:06 - 0:09
    а справді розміщувати їх один на одному.
  • 0:09 - 0:12
    Тут ми маємо веб-сторінку
  • 0:12 - 0:16
    з декількома заголовками, зображеннями
  • 0:16 - 0:18
    і декількома абзацами ось тут.
  • 0:18 - 0:20
    І всі вони зараз розставлені
  • 0:20 - 0:22
    за стандартним принципом розміщення,
  • 0:22 - 0:24
    яку використовує браузер
  • 0:24 - 0:27
    і яку ми називаємо
    статичне або нормальне розміщення.
  • 0:27 - 0:29
    Це означає, що рядкові елементи,
  • 0:29 - 0:31
    такі як зображення,
  • 0:31 - 0:32
    розміщені зліва направо,
  • 0:32 - 0:34
    а блокові елементи,
  • 0:34 - 0:35
    такі як заголовки і абзаци,
  • 0:35 - 0:38
    розміщені з верху до низу.
  • 0:38 - 0:40
    Ми можемо змінити цей принцип розміщення
  • 0:40 - 0:43
    за допомогою властивостей розміщення CSS.
  • 0:43 - 0:46
    Спробуймо це зробити на цьому
    зображенні пейзажу (landscape).
  • 0:46 - 0:50
    Ми напишемо "position" (розміщення),
    двокрапку
  • 0:50 - 0:51
    і значення "relative" (відносний).
  • 0:51 - 0:53
    Відносний принцип розміщення означає:
  • 0:53 - 0:55
    "Розмісти його, як зазвичай,
  • 0:55 - 0:58
    але потім змісти його
    на певну кількість одиниць".
  • 0:58 - 1:00
    Щоб сказати браузеру, на яку кількість одиниць
  • 1:00 - 1:02
    потрібно змістити об'єкт,
  • 1:02 - 1:03
    ми маємо використати поєднання
  • 1:03 - 1:05
    чотирьох нових властивостей CSS:
  • 1:05 - 1:07
    Top (верх), bottom (низ) , left
    (лівий бік), і right (правий бік).
  • 1:07 - 1:09
    Скажімо, ми хочемо, щоб зображення
  • 1:09 - 1:12
    було на 20 пікселів нижче.
  • 1:12 - 1:14
    Напишімо: top: 20 px,
  • 1:14 - 1:15
    І ще на 10 пікселів вліво...
  • 1:15 - 1:17
    Ми напишемо: left: 10px.
  • 1:17 - 1:19
    Це достатньо точно,
  • 1:19 - 1:21
    але не ідеально точно.
  • 1:21 - 1:23
    Я хочу показати вам щось значно крутіше.
  • 1:23 - 1:25
    Абсолютне розміщення.
  • 1:25 - 1:27
    Ми його використовуємо, щоб
  • 1:27 - 1:29
    забрати елемент зі звичного русла
  • 1:29 - 1:31
    і поставити його будь-де на екрані.
  • 1:31 - 1:32
    Щоб зробити це,
  • 1:32 - 1:33
    Я зміню "relative"
  • 1:33 - 1:34
    на "absolute"
  • 1:34 - 1:35
    на цьому пейзажі,
  • 1:35 - 1:37
    і збережу його у лівому верхньому куті.
  • 1:37 - 1:38
    І ви можете побачити,
  • 1:38 - 1:39
    що тепер пейзаж
  • 1:39 - 1:42
    перекрив наші зображення
    і заголовок "dance party".
  • 1:42 - 1:43
    І зараз ми це виправимо.
  • 1:43 - 1:45
    Почнімо з Вінстона (winston).
  • 1:45 - 1:48
    Ми додамо йому правило
  • 1:48 - 1:52
    і напишемо в ньому "position: absolute",
  • 1:52 - 1:54
    і потім, скажімо,
  • 1:54 - 1:56
    верх: 40 пікселів,
  • 1:56 - 1:58
    оу, краще 50 пікселів.
  • 1:58 - 2:00
    Ліва сторона: 50 пікселів.
  • 2:00 - 2:02
    Гаразд, так виглядає добре.
  • 2:02 - 2:04
    І Хопер (hopper) також дуже хоче
  • 2:04 - 2:06
    залізти наверх.
  • 2:06 - 2:07
    Тому ми також дамо Хоперу
  • 2:07 - 2:12
    абсолютне розміщення
  • 2:12 - 2:15
    і напишемо: верх: 30 пікселів
  • 2:15 - 2:18
    і зліва: 60 пікселів.
  • 2:18 - 2:20
    Добре, моя мета
  • 2:20 - 2:21
    зробити так, наче Хопер
  • 2:21 - 2:24
    танцює перед Вінстоном.
  • 2:24 - 2:27
    Але зараз це так не виглядає,
  • 2:27 - 2:28
    тому що Вінстон намальований
  • 2:28 - 2:30
    поверх Хопера.
  • 2:30 - 2:32
    Щоб виправити це,
  • 2:32 - 2:34
    я можу змінити порядок розміщення
  • 2:34 - 2:37
    тегів в коді HTML.
  • 2:37 - 2:39
    Але існує кращий спосіб —
  • 2:39 - 2:42
    використати властивість CSS "z-index".
  • 2:42 - 2:44
    Ми можемо використати її,
    щоб сказати браузеру,
  • 2:44 - 2:45
    в якому саме порядку
  • 2:45 - 2:46
    розміщувати елементи,
  • 2:46 - 2:48
    надавши їм різні індекси.
  • 2:48 - 2:51
    Я почну з пейзажу
  • 2:51 - 2:53
    і дам йому "z-index" 1.
  • 2:53 - 2:56
    Далі йде Вінстон з цифрою 2
  • 2:56 - 2:59
    і Хопер вилазить нагору з цифрою 3.
  • 2:59 - 3:00
    Чудово!
  • 3:00 - 3:03
    Тепер Хопер танцює перед Вінстоном,
  • 3:03 - 3:04
    навіть якщо останньому це не подобається...
  • 3:04 - 3:05
    але йому доведеться змиритись.
  • 3:05 - 3:10
    Але в нас досі є приховані заголовки
    і текст.
  • 3:10 - 3:12
    Тому... спробуймо поставити...
  • 3:12 - 3:14
    Можливо, я хочу, щоб
  • 3:14 - 3:17
    заголовок "Dance party" був зверху
    над усім.
  • 3:17 - 3:19
    Тому я додам йому
  • 3:19 - 3:21
    абсолютне розміщення
  • 3:21 - 3:22
    і "z-index" 4.
  • 3:22 - 3:23
    Так виглядає добре.
  • 3:23 - 3:24
    Можливо, лівіше на 10 пікселів.
  • 3:24 - 3:25
    Просто пересунемо його трохи.
  • 3:25 - 3:27
    Може, трошки більше.
  • 3:27 - 3:29
    Чудово, так це все має гарний вигляд.
  • 3:29 - 3:30
    Тепер, слова пісні.
  • 3:30 - 3:31
    Я насправді хочу,
  • 3:31 - 3:33
    щоб вони відображалися знизу під всім.
  • 3:33 - 3:36
    Тому я думаю тут скористатись
  • 3:36 - 3:38
    відносним розміщенням
  • 3:38 - 3:39
    і потім просто додати
    значення верху,
  • 3:39 - 3:41
    яке, як ви знаєте,
  • 3:41 - 3:43
    буде дорівнювати висоті зображення.
  • 3:43 - 3:45
    Це буде двісті двадцять пікселів.
  • 3:45 - 3:48
    Гаразд, тепер виглядає справді добре.
  • 3:48 - 3:52
    У нас зараз відбувається справді
    драйвова вечірка.
  • 3:52 - 3:56
    Зараз, якщо ви зупините відео
    і спробуєте прокрутити сторінку,
  • 3:56 - 3:59
    ви побачите, що все прокручується разом.
  • 3:59 - 4:01
    І важливим є те,
  • 4:01 - 4:04
    що абсолютне розміщення є відносним
    до верху сторінки.
  • 4:04 - 4:06
    Тому, коли ви будете
    прокручувати сторінку вниз,
  • 4:06 - 4:08
    об'єкти, які мали 10 пікселів зверху,
  • 4:08 - 4:11
    не залишатимуться на екрані,
  • 4:11 - 4:15
    тому що ви рухатиметесь далі вниз.
  • 4:15 - 4:16
    Ще однією можливістю
  • 4:16 - 4:17
    є фіксоване розміщення (fixed),
  • 4:17 - 4:19
    яке буде виглядати так, наче
  • 4:19 - 4:20
    елементи не рухаються взагалі.
  • 4:20 - 4:22
    І якщо ви хочете це випробувати,
  • 4:22 - 4:23
    ми можемо просто змінити
  • 4:23 - 4:26
    h1 з абсолютного на фіксований.
  • 4:26 - 4:29
    А тепер поставте на паузу відео і спробуйте
  • 4:29 - 4:31
    прокрутити сторінку, і ви побачите,
  • 4:31 - 4:34
    що напис "Dance party" залишається на одному
    й тому ж місці.
  • 4:34 - 4:36
    Тому що зараз він є відносним
  • 4:36 - 4:41
    до верху самого екрана, вікна.
  • 4:41 - 4:44
    Гаразд, ми навчились, як використовувати
  • 4:44 - 4:46
    три різні властивості розміщення,
  • 4:46 - 4:48
    щоб робити справді класні речі.
  • 4:48 - 4:49
    Що ж, коли ми використовуємо
  • 4:49 - 4:51
    абсолютне і фіксоване розміщення?
  • 4:51 - 4:53
    Ви можете використовувати його,
  • 4:53 - 4:54
    щоб зробити певну гру,
  • 4:54 - 4:56
    як я зробила тут,
  • 4:56 - 4:57
    тому що ви захочете розмістити
  • 4:57 - 4:59
    усі частини дійства в браузері.
  • 4:59 - 5:00
    Але ви також можете використовувати їх
  • 5:00 - 5:02
    і для звичайних веб-сторінок,
  • 5:02 - 5:03
    таких як на Khan Academy.
  • 5:03 - 5:04
    Ми використовуємо абсолютне розміщення
    для моделей,
  • 5:04 - 5:06
    які розташовані посередині сторінки,
  • 5:06 - 5:08
    а фіксоване розміщення
  • 5:08 - 5:09
    для поля пошуку на сторінці команди,
  • 5:09 - 5:12
    щоб його завжди було видно
    під час прокрутки.
  • 5:12 - 5:14
    Напевно, ви не будете використовувати
  • 5:14 - 5:16
    розміщення на кожній сторінці,
  • 5:16 - 5:17
    але коли використовуватимете,
  • 5:17 - 5:20
    ви будете дуже щасливі,
    що така можливість існує.
  • 5:20 - 5:24
    Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"
Title:
Розміщення елементів в CSS
Description:
more » « less
Video Language:
English
Duration:
05:20
Julia edited Ukrainian subtitles for CSS positioning
Zoriana Havrylyuk edited Ukrainian subtitles for CSS positioning
Zoriana Havrylyuk edited Ukrainian subtitles for CSS positioning

Ukrainian subtitles

Revisions

Our website uses cookies for analysis purposes.