CSS Position приклади
Верстальники-новачки нерідко мають труднощі з позиціонуванням елементів через CSS. Насправді властивість CSS Position значно простіша в освоєнні, ніж здається на перший погляд. Опанувавши їх, ви отримаєте потужний інструмент, за допомогою якого можна розмістити всі елементи сторінки в потрібних місцях. Але щоб досягти результату, потрібно знати про всі існуючі значення, оскільки принципи їх дії сильно різняться
Специфіка побудови потоку документа
Position CSS працює з потоком веб-сторінки. Як це зрозуміти? За замовчуванням всі елементи сторінки розміщуються в тому порядку, в якому ви створили їх у html-розмітці. Якщо тег header розташований над footer тегом, то і на сторінці він буде відображатися вище. І навпаки, якщо ви чомусь вирішите розмістити footer у html над «хедером», «підвал» сторінки відображатиметься над «шапкою». При цьому блокові елементи займають всю доступну для них ширину. Рядкові, у свою чергу, розташовуються в один рядок, доки не займуть її всю, а потім почнуть переноситися на новий. Цей порядок називається «потоком документа».
Для зміни поведінки потоку використовується властивість Position у CSS. Також він може змінюватись через властивість float, але його ми розглядати не будемо. За допомогою позиціонування можна змусити елемент «випасти» із звичайного потоку, після чого він почне поводитися по-новому. Як саме – залежить від використаного значення якості.
CSS Position: static
Position: static, або статичне позиціонування, є стандартним значенням для всіх блоків html, які ви створили. За звичайних умов вам не доведеться мати з ним справу. Якщо для якогось блоку або рядка не задано взагалі жодного позиціонування, значить воно маєзначення static. На сторінці такий компонент відображається відповідно до потоку. Якщо вказати властивості right/left або top/bottom, ніякого ефекту не буде.
CSS Position: fixed
При використанні цієї властивості елемент виявляється поза нормальним потоком документа. Тепер його положення обчислюється щодо вікна браузера незалежно від того, як розміщуються інші компоненти. Іншими словами, блок з Position : fixed відправиться у верхню частину сторінки, притиснеться до краю вікна браузера, а інші елементи займуть його місце відповідно до потоку.
Головна особливість фіксовано позиціонованих елементів у тому, що вони можуть перекривати інші блоки та рядки сторінки. При скролінг блок з Position : fixed буде ніби залишатися на місці, не зникаючи з екрана. Це корисно, якщо потрібно зробити навігацію або аналогічний елемент, до якого користувач завжди повинен мати доступ. Фіксоване позиціонування також застосовується, якщо потрібно розмістити кнопку швидкого скролінгу певну частину сторінки.
CSS Position: relative
Використання цієї властивості називається відносним позиціонуванням. Якщо задати елементу властивість Position: relative, той залишиться на своєму місці. На перший погляд, нічого особливого не станеться, але все зміниться, якщо додатково використовувати властивості right/left та top/bottom. З їх допомогою можна керувати переміщенням компонента щодо його розташування. На тому місці, де блок або рядок були раніше, виявиться порожній простір - інші елементи залишаться на своїх положеннях, не звертаючи уваги на місце, що звільнилося.
При переміщенні компонент ніяк не впливає на положення частин сторінки. Вони так і залишаться на своїх місцях, хочщодо позиціонований блок може їх перекрити. Сама собою властивість використовується рідко. Зазвичай його застосовують у поєднанні з наступним варіантом.
Абсолютне позиціонування
Один з найцікавіших і найчастіше використовуваних варіантів. При використанні властивості Position зі значенням absolute положення компонента сторінки буде вираховуватись щодо вікна браузера. Інші елементи (які не є абсолютно позиціонованими) ніби «забудуть» про існування «собрата» з Position : absolute і займуть його місце в потоці. Здавалося б, все так само, як у випадку з Position : fixed, але є і серйозні відмінності.
По-перше, положенням елемента можна вільно управляти – для цього використовуються властивості top/right/bottom/left. Наприклад, якщо ви задасте значення bottom : 100px, блок «відштовхнеться» від нижньої частини сторінки на 100 пікселів. По-друге, при скролінг «абсолютний» компонент залишиться на своєму місці, замість того, щоб переміщатися зі сторінкою.
Взаємодія абсолютних блоків із батьківськими елементами
Можна домогтися ще більш точного контролю за абсолютно позиціонованим компонентом. Для цього потрібно задати його батькові властивість Position: fixed, relative або absolute.
Розглянемо приклад. У вас є div із класом relative-div, всередині якого розміщується div із класом absolute-div. Задаємо внутрішньому блоку властивість Position: absolute. Той одразу ж «вилітає» з потоку і виявляється десь угорі, адже тепер його розташування прораховується щодо вікна браузера. Тепер задаємо блоку з класом relative-div властивість Position: relative та «блудний син» повертається на місце. Майже. Насправді він виявляється у верхньому лівому кутку батьківського елемента.
Чомутак відбувається? Справа в специфіці якості Position: absolute. За умовчанням його становище залежить від вікна браузера, але якщо «батько» теж позиціонований якось окрім static, то позиція починає залежати від батьківського елемента. Це дуже зручно, тому що можна розмістити компонент у будь-якому місці, не прораховуючи величезних цифр щодо вікна браузера. Прийом часто використовується для розміщення ікон, кнопок та інших невеликих елементів.
Position CSS по центру
Одна з головних труднощів новачків полягає в тому, щоб центрувати елемент вертикально та горизонтально. Грамотно використовуючи властивість Position зробити це простіше простого. CSS Position: absolute по центру встановлюється так. Допустимо, у вас є d iv із класом absolute-div, який знаходиться в «діві» із класом relative-div. "Батько" позиціоновано відносно і його ширина дорівнює ширині всієї сторінки. "Нащадок" має ширину і висоту 400 px, абсолютне позиціонування і за умовчанням розташовується у верхньому лівому куті батьківського елемента.
Все, що потрібно зробити – це задати абсолютному компоненту top: 50% та left: 50%. Майже готово! Absolute-div зрушив з місця і виявився майже в центрі, але не зовсім. Середини «батька» стосуються його краю, а нам потрібно, щоб у центрі блоку опинився центр «нащадка». Для цього потрібно задати йому margin-left та margin-right зі значеннями -200 px. Тим самим ми змістимо абсолютно позиціонований блок на половину його висоти та ширини. Все, він у центрі!
Перекривання компонентів
Проблемою може стати непросте, здавалося б, «накладення» позиціонованих елементів з їхньої «сусідів». Наприклад, компонент з Position : fixed перекриватиме все, що розташоване на сторінці. Виправити ситуацію можна за допомогоювластивості z-index, однак пам'ятайте, що воно працює тільки для елементів, що позиціонують. Відповідно, якщо ви хочете розміщувати блок поверх фіксовано позиціонованого елемента, цьому блоку доведеться також задати позиціонування. Наприклад, відносне.
Найкращий спосіб освоїти позиціонування – розглядати приклади Position CSS, експериментувати та пробувати щось своє. Постарайтеся навчитися використовувати його у поєднанні з функцією calc() – це дасть змогу більш гнучко налаштовувати розташування. Однак пам'ятайте, що ця властивість не призначена для створення всієї «сітки» сторінки. З його допомогою потрібно переміщати відносно невеликі елементи, інакше можна легко заплутатися.