St (en) LESSON 9 - Positioned Items

Позиційовані елементи

Задачі та властивості position:

  • зробити напис на зображенні товару
  • показати один елемент поверх іншого при ховері
  • прикріпити меню до верхньої частини в'юпорту, навіть під час скролу
  • дозволяє буквально підняти елемент і розмістити його поверх іншого
  • (static) (cтатичне позиціонування) - розташування елементів по замовчуванню (в блоковій моделі, флексбоксі) в потоці сторінки.
  • відносне (relative), абсолютне (absolute) і фіксоване (fixed) позиціонування дозволяють підняти елемент над потоком сторінки і вручну його позиціонувати, використовуючи систему координат, початок якої залежить від типу позиціонування.

Властивість position

Змінює тип позиціонування елемента. За замовчуванням встановлено значення static. Для керування положенням елемента (відносно батьківського або вихідного положення) використовуються властивості: top, left, bottom або right.


position: static | relative | absolute | fixed | sticky | inherit
Елемент, position якого відрізняється від static, називається «позиційований елемент». visual model of the box model

Relative positioning
Відносне позиціонування

Елемент залишається в потоці сторінки (сусідні елементи не займають його місце). Візуально елемент можна зсунути, також він може перекривати сусідів.

Властивості top, left, bottom і right - зміщення елемента (візуальне) щодо його вихідного положення. Можуть приймати від'ємні значення.

visual model of the box model

КОРИСНО

Відносне позиціонування не використовується самостійно, тому що елемент не виривається з потоку сторінки, продовжуючи займати місце. Використовується тільки разом із абсолютним позиціонуванням.

Створимо три блоки. Середньому div.relative встановимо відносне позиціонування і візуально змістимо його вправо і вниз щодо початкового положення.

Codepen

See the Pen wb-9 Positioned elements by Roman80-IT (@Roman80-IT) on CodePen.

Absolute positioning
Абсолютне позиціонування

  • Елемент виривається з потоку сторінки – сусідні елементи займають його місце.
  • Відлік top, left, bottom і right - від найближчого предка з позиціонуванням (не статичне) або від меж елемента <body>.
  • в основному використовується разом із відносним для декоративного позиціонування елементів. Тобто елемент «абсолютно» позиціонується «щодо» якогось свого предка, який знаходиться в потоці сторінки.
  • тоді значення top, left, right і bottom відраховуються від меж предка - тобто встановлення position: relative предку використовується з єдиною метою - змусити абсолютно позиційований елемент розташовуватися щодо цього предка.

КОРИСНО

Запис bottom: 20px означає відстань між нижньою межею щодо позиціонованого предка і нижньою межею абсолютно позиціонованого елемента. Аналогічно працюють right, left і top - задається відстань між однойменними сторонами предка і елемента.

Створимо три блоки із зображенням і текстом в кожному. Задамо div.thumb відносне позиціонування, а p.label - абсолютне, щоб можна було поставити текст поверх зображення в цьому блоці. Не забуваємо прибрати у p.label зовнішній відступ (margin), оскільки він впливає на зміщення самого елемента, але не на інші елементи в потоці.

Codepen

See the Pen Untitled by Roman80-IT (@Roman80-IT) on CodePen.

УВАГА!

Якщо не поставити div.thumb відносне позиціонування, то всі три p.label опиняться у верхньому правому куті вікна, оскільки значення top і right будуть відраховуватися щодо елемента <body>.

Fixed positioning
Фіксоване позиціонування

елемент вилучається з потоку сторінки і позиціонується щодо в'юпорту (вікна браузера). Це створює ефект фіксації елемента в певному місці екрану при прокручуванні сторінки. Фіксована шапка Створимо кнопку чату з менеджером button.chat-buttonbutton.chat-button і помістимо її в нижній правий кут в'юпорту. Під час прокручування сторінки кнопка залишається на місці, тому що у неї фіксоване позиціонування.
Codepen

See the Pen wb-9 Fixed positioning by Roman80-IT (@Roman80-IT) on CodePen.

Sticky positioning
Липке позиціонування

Липке позиціонування (sticky) - це ніби комбінація властивостей relative і fixed. На ілюстрації - липке позиціонування задається елементам з літерами A і B:

Sticky positioning
  1. Доки елемент знаходиться у своєму контейнері і контейнер не покидає область видимості під час вертикальної прокрутки - елемент поводить себе ніби позиціонується щодо (relative).
  2. Щойно частина батьківського контейнера залишає зону видимості, елемент фіксується на сторінці доти, доки хоча б якусь частину контейнера видно на екрані.
  3. Якщо весь контейнер покине зону видимості, то знову увімкнеться поведінка як під час відносного позиціонування - елемент зникне з екрану одразу після контейнера.

Для реалізації липкого позиціонування необхідні всього три умови:

  • У липкого елемента повинно бути встановлено позиціонування position: sticky.
  • У липкого елемента повинно бути встановлено положення, наприклад top: 0.
  • Елемент-контейнер повинен бути більшим по висоті за липкий елемент.
  • Заголовки секцій в прикладі зроблені липкими, тому, під час прокручування сторінки вони будуть «прилипати» до верху області перегляду доти, доки видима будь-яка частина їх секції.
Заголовки секцій в прикладі зроблені липкими, тому, під час прокручування сторінки вони будуть «прилипати» до верху області перегляду доти, доки видима будь-яка частина їх секції.
Codepen

See the Pen wb-9 sticky-positioning by Roman80-IT (@Roman80-IT) on CodePen.