Як використовувати властивість position у CSS для вирівнювання елементів

Розміщення елементів за допомогою CSS у веб-розробці не так просто, як здається. Речі можуть швидко ускладнитися, оскільки ваш проект стає більшим, і, не маючи хорошого розуміння того, як CSS має справу з вирівнюванням елементів HTML, ви не зможете виправити свої проблеми з вирівнюванням.

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

У цій статті я поясню один із найбільш заплутаних способів вирівнювання елементів із чистим CSS: властивість position. У мене також є ще один підручник з властивості відображення CSS тут.

Якщо ви бажаєте, ви можете переглянути відеоверсію підручника з позиціонування CSS:

Давайте почнемо...

Властивості CSS Позиція та помічник

Таким чином , існує 5 основних значення Position власності :

position: static | relative | absolute | fixed | sticky

і додаткові властивості для встановлення координат елемента (я називаю їх «допоміжними властивостями» ):

top | right | bottom | left І z-index

Важлива примітка : Допоміжні властивості не працюють без оголошеної позиції або з position: static.

Що це за z-індекс?

Ми маємо висоту та ширину (x, y) як 2 виміри. Z - 3-й вимір. Елемент веб-сторінки стоїть перед іншими елементами, коли його z-indexзначення зростає.

Z-індекс не працює зposition: staticзаявленою позицією або без неї.

Ви можете подивитися відео на моєму каналі, щоб докладніше дізнатись, як використовувати z-index :

Тепер переходимо до значень властивостей position ...

1. Статичні

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

Спочатку ми визначаємо нашу структуру HTML:

Потім ми створюємо 2 ящики та визначаємо їх ширину, висоту та положення:

.box-orange { // without any position declaration background: orange; height: 100px; width: 100px; } .box-blue { background: lightskyblue; height: 100px; width: 100px; position: static; // Declared as static }

Як ми бачимо на малюнку, визначення положення: статичне чи ні не має ніякого значення.Поля розташовані відповідно до звичайного документообігу .

2. Відносний

position: relative: Нове положення елемента щодо його нормального положення.

Починаючи з position: relativeі для всіх нестатичних позиційзначень, ми можемо змінити позицію елемента за замовчуванням , використовуючи допоміжні властивості, про які я згадав вище.

Давайте перенесемо помаранчеву коробку поруч із синьою.

.box-orange { position: relative; // We are now ready to move the element background: orange; width: 100px; height: 100px; top: 100px; // 100px from top relative to its old position left: 100px; // 100px from left }
ПРИМІТКА. Використання позиції: відносна для елемента не впливає на позицію інших елементів.

3. Абсолютна

В position: relative, елемент розміщений відносно самого себе. Однак абсолютний lyпозиціонований елемент відносно батьківського елемента .

Елемент з position: absoluteвилучено із звичайного документообігу. Він автоматично розміщується у вихідній точці ( лівий верхній кут) свого батьківського елемента. Якщо він не має батьківських елементів, початковим документом буде його батько.

Оскільки position: absoluteвилучає елемент із потоку документів, це впливає на інші елементи та поводиться як елемент, повністю видалений з веб-сторінки.

Додамо контейнер як батьківський елемент:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; }

Зараз схоже на те, що синя коробка зникла, але ні. Синя коробка поводиться так, ніби помаранчеву коробку видалено, тому вона зміщується до місця помаранчевої коробки.

Давайте перемістимо помаранчеве поле на 5 пікселів:

.box-orange { position: absolute; background: orange; width: 100px; height: 100px; left: 5px; top: 5px; }

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

.container { position: relative; background: lightgray; } .box-orange { position: absolute; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

4. Виправлено

Так само position: absolute, фіксовані позиціоновані елементи також видаляються із звичайного документообігу. Відмінності:

  • Вони стосуються лише документа, а не будь-яких інших батьків.
  • На них прокрутка не впливає .
.container { position: relative; background: lightgray; } .box-orange { position: fixed; background: orange; width: 100px; height: 100px; right: 5px; // 5px relative to the most-right of parent }

Тут у прикладі я зміню позицію помаранчевої коробки на фіксовану , і на цей раз це відносно 5 пікселів праворуч від, а не його батьківський (контейнер) :

As we can see, scrolling the page doesn’t affect the fixed positioned box. It is not relative to its parent (container) anymore.

5. Sticky

position: sticky can be explained as a mix of position: relative and position: fixed.

It behaves until a declared point like position: relative, after that it changes its behavior to position: fixed . The best way to explain position: sticky is by an example:

IMPORTANT: Position Sticky is not supported in Internet Explorer and earlier versions of other browsers. You can check the browser support at caniuse.com.

The best way to understand the CSS Position Property is by practice. Keep coding until you have a better understanding. If something is not clear, I will answer your questions below in the comments section.

If you want to learn more about web development, feel free to follow me on Youtube!

Thank you for reading!