Властивість позиції CSS, пояснювана прикладами

Перш ніж ви зможете справді добре володіти CSS, вам слід зрозуміти основи. Ви повинні розуміти властивості CSS та їх значення.

У цій статті ми зупинимось на властивості позиції CSS. Ми збираємось вивчити різні значення властивості позиції CSS і як вони працюють. Давай зробимо це!

Що таке властивість позиції CSS?

Властивість CSS position визначає позицію елемента в документі. Ця властивість працює з властивостями лівого, правого, верхнього, нижнього та z-індексу для визначення кінцевої позиції елемента на сторінці.

Існує п’ять значень, які може приймати властивість position. Вони є:

  1. статичний
  2. відносний
  3. абсолютний
  4. виправлений
  5. липкий

Давайте обговоримо кожен із них.

Статичні

Це значення за замовчуванням для елементів. Елемент розміщений відповідно до звичайного потоку документа. Властивості ліворуч, праворуч, зверху, знизу та z-index не впливають на елемент з position: static.

Давайте на прикладі покажемо, що position: staticне впливає на позицію елемента. У нас є три divs, розміщені в батьківському контейнері. Ми використаємо цей приклад у цій статті.

 I'm the other sibling element. All eyes on me. I am the main element. I'm the other sibling element. 

Давайте додамо position: staticдо div із класом main-elementта ліві, найвищі значення до нього. Ми також додаємо деякі стилі до інших div, щоб диференціювати їх від елемента у фокусі.

.main-element { position: static; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .sibling-element { padding: 10px; background-color: #f2f2f2; }

Це результат.

Ви помітили, що це не змінює? Це підтверджує той факт, що властивості зліва та знизу не впливають на елемент з position: static.

Переходимо до наступного значення.

Відносна

Елементи з position: relativeзалишаються в звичайному потоці документа. Але, на відміну від статичних елементів, властивості лівого, правого, верхнього, нижнього та z-індексу впливають на положення елемента. Зміщення, засноване на значеннях властивостей ліворуч, праворуч, зверху та знизу, застосовується до елемента щодо самого себе.

Давайте замінимо position: staticна position: relativeв нашому прикладі.

.main-element { position: relative; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; }

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

Абсолютна

Елементи з position: absoluteрозташовані відносно батьківських елементів. У цьому випадку елемент вилучається із звичайного документообігу. Інші елементи будуть поводитися так, ніби цього елемента немає в документі. Для елемента в макеті сторінки не створюється місця. Значення лівого, верхнього, нижнього та правого визначають кінцеве положення елемента.

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

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

Повернемося до нашого прикладу. У цьому випадку ми змінюємо положення основного елемента на position: absolute. Ми також надамо його батьківському елементу відносне положення, щоб він не перемістився відносно елемента.

.main-element { position: absolute; left: 10px; bottom: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 100px; padding: 10px; background-color: #81adc8; } .sibling-element { background: #f2f2f2; padding: 10px; border: 1px solid #81adc8; } 

Ось результат.

Зверніть увагу, що в документі не було створено місця для елемента. Елемент тепер розміщений відносно батьківського елемента. Зверніть це на увагу, коли ми переходимо до наступного значення.

Виправлено

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

Зазначимо одне: прокрутка не впливає на нерухомі елементи. Вони завжди залишаються в одному положенні на екрані.

.main-element { position: fixed; bottom: 10px; left: 10px; background-color: yellow; padding: 10px; } html { height: 800px; }

У цьому випадку елемент розташовується відносно елемента. Спробуйте прокрутити, щоб побачити, що елемент фіксується на екрані.

Переходимо до кінцевого значення.

Липкий

position: stickyє сумішшю position: relativeта position: fixed. Він діє як відносно розташований елемент до певної точки прокрутки, а потім діє як фіксований елемент. Не бійтеся, якщо ви не розумієте, що це означає, приклад допоможе вам краще зрозуміти це.

.main-element { position: sticky; top: 10px; background-color: yellow; padding: 10px; } .parent-element { position: relative; height: 800px; padding: 50px 10px; background-color: #81adc8; }

Прокрутіть вкладку результату, щоб побачити результат. Ви бачите, що він діє як відносний елемент, поки не дійде до певної точки на екрані, top: 10pxа потім потрапляє туди, як фіксований елемент.

Резюме

Ой! Це було досить їзда. Але я дуже сподіваюся, що ця стаття допомогла вам зрозуміти властивість позиції CSS і як це працює.

Feel free to play around with the fiddles if you don't fully understand any of them. You can change the values and notice the difference or better still, try to use the position property to work on a personal project.

Remember that getting better at CSS takes constant practice. So keep practicing and you'll get better.

Want to get notified when I publish a new article? Click here.