CSS Position: приклади

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 за центром встановлюється наступним чином: Припустимо, у вас є div з класом 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 () - це дасть можливість більш гнучко налаштовувати розташування. Однак пам 'ятайте, що ця властивість не призначена для вибудовування всієї "сітки" сторінки. За його допомогою потрібно переміщати відносно невеликі елементи, інакше можна занадто легко заплутатися.