Позиціонування в CSS

1

Від автора: одним з найбільш корисних інструментів в CSS, на мій погляд, є позиціонування елементів документа. Під терміном «позиціонування» розуміється можливість розташувати елемент (блок, картинку та ін) в абсолютно будь-якому місці документа.

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

Позиціонування в CSSПозиціонування в CSS

Для початку давайте розглянемо класичний приклад, де нам буде потрібно використання позиціонування… до речі, цей приклад якраз і взятий з одного із згаданих вище питань. Отже, на зазначеній частині шаблону:

Позиціонування в CSS

ми маємо 2 логічні частини — шапка і блок меню. При цьому обидва блоки містять у собі частини єдиної картинки — автомобіля «заїжджає» з шапки на меню. Теоретично тут ми могли б обійтися і без позиціонування. Для цього достатньо було б вирізати картинку шапки і фон меню, при цьому на кожній з картинок була б присутня своя частина автомобіля:

Позиціонування в CSS

Позиціонування в CSS

Але цей варіант далеко не оптимальний. Набагато краще було б, якби у нас була окремо картинка автомобіля, яка зовсім не залежала б від решти потоку елементів. У цьому випадку ми змогли б «тягати» автомобіль, вибираючи для нього потрібне розташування. Якраз таку можливість нам надає властивість CSS під назвою position.

Зазначене властивість має наступні можливі атрибути: position: absolute | fixed | relative | static

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

А ось 3 інших атрибута — вельми корисні. Для початку давайте вкажемо опис кожного з них.

— absolute (абсолютне). Вказує, що елемент абсолютно позиціонований. В цьому випадку він не існує у звичайному потоці документа подібно іншим елементам, які відображаються на веб-сторінці немов абсолютно позиційованого об’єкта і немає. Положення елемента задається атрибутами left, top, right і bottom щодо краю вікна браузера.

— fixed (фіксований). По своїм властивостям це значення аналогічно аргументу absolute, але на відміну від нього прив’язується до зазначеної параметрами left, top, right і bottom точки на екрані і не змінює свого положення навіть під час перегляду веб-сторінки.

— relative (відносний). Положення елемента встановлюється щодо його початкового місця. Додавання атрибутів left, top, right і bottom змінює позицію елемента і зрушує його в ту або іншу сторону від початкового розташування в залежності від застосовуваного параметра.

Отже, як же ми можемо здійснити задумане. Все просто. Нам відома ширина макета сайту (вона фіксована). Відповідно, все що потрібно — це розмістити картинку, наприклад, в шапці і орієнтувати її відносно шапки. «Зрушувати» картинку ми можемо за допомогою згаданих атрибутів left (зсув від лівої кордону), top (зсув від верхньої межі), right (зсув від правої межі) і bottom (зсув від нижньої межі). У всіх чотирьох випадках кордонами будуть кордону елемента, щодо якого здійснюється позиціонування. І ось тут є невеликий нюанс, який ми зараз побачимо.

Отже, зображення автомобіля ми вирізали з макета та розміщуємо її в шапці:

Записки Мандрівника

на своєму АВТО
і не тільки…

Позиціонування в CSS

В результаті автомобіль розташується між посиланням (для неї встановлено вирівнювання float:left) і заголовком другого рівня (для нього встановлено вирівнювання float:right) в шапці. Поки що наша картинка знаходиться в потоці елементів. Тепер давайте «вилучимо» її з цього потоку, щоб її можна було пересувати. Встановимо для елемента з класом car абсолютне позиціонування:

.car{position:absolute;}

Якщо зараз оновити сторінку, то ніяких змін ми не побачимо. Все тому, що ми поки що не вказали ті самі атрибути left, top, right і bottom. Для позиціонування елемента необхідно вказувати 2 атрибута (1 з них повинен відповідати за горизонтальне рух, другий — за вертикальне… наприклад, пара left-top або left-bottom, або right-top тощо).

Для початку давайте вкажемо нульову точку відліку для картинки, притиснувши її до верхнього лівого кута:

.car{
position:absolute;
left:0;
top:0;
}

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

Позиціонування в CSS

Чому так сталося? Справа в тому, що задавши абсолютне позиціонування елемента, він починає позиціонуватися щодо елемента body. Як же зробити так, щоб елемент позиціонувався щодо іншого конкретного елемента, наприклад, щодо свого батька — шапки? Все дуже просто. Для цього ми можемо задати батьківського елементу, наприклад, властивість відносного позиціонування. Після цього дочірній блок буде позиціонуватися вже щодо свого батька, а не щодо елемента body.

.head{
height: 250px;
position:relative;
}
.car{
position:absolute;
left:0;
top:0;
}

Позиціонування в CSS

При цьому зауважте, що елемент вже поза потоку документа, тобто інші елементи його просто «не помічають» — автомобіль перекриває посилання, ігноруючи властивість обтікання float:left. Відмінно, ми спозиціонували картинку щодо батьків. Залишилося подивнуть її на певну кількість пікселів від лівого і верхнього меж батьків (атрибути left-top). Тут можна взяти відповідні координати з макета фотошопу або використовувати інші зручні інструменти… або просто вирівнявши картинку «на око».

.car{
position:absolute;
left:450px;
top:140px;
}

І ми досягнемо необхідного результату:

Позиціонування в CSS

Нічого складного немає. Оскільки макет я взяв з питання користувача — я не буду його прикладати до додаткових матеріалів. Практично аналогічний макет Ви можете знайти в нашому курсі – Як намалювати неймовірний дизайн сайту з нуля, зверстати його і встановити на WordPress

Для закріплення матеріалу давайте розв’яжемо наступну задачу, використовуючи можливості позиціонування. Отже:

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

Почнемо з першого. Маємо блок з наступними розмірами: ширина — 500 пікселів, висота — 300 пікселів. Необхідно центрувати цей блок щодо вікна браузера. Цілком очевидно, що тут ми повинні скористатися відносними величинами (відсотками), оскільки дозвіл у кожного конкретного користувача може відрізнятися — це і 1024*768, і 1440*900, і маса інших.

Вказуємо розмітку блоку:

Його стилі:

.block{
width:500px;
height:300px;
border:1px solid red;
position:absolute;
left:50%;
top:50%;
}

Якщо подивитися результат в браузері, то побачимо, що зараз центрирована ліва верхня точка блоку. Це логічно, оскільки ця точка є своєрідним початком системи координат блоку. І саме цю точку ми відсунули від лівого верхнього кута браузера на 50% (left:50%; top:50%). Ми лінія вершину блоку, але яким чином центрувати блок? Тут все просто. Для реалізації задуманого ми скористаємося зсувами (властивість margin) і посунемо блок вгору на половину його висоти і вліво на половину ширини. Таким чином, ми отримаємо центр самого блоку, який співпадає з центром документа:

.block{
width:500px;
height:300px;
border:1px solid red;
position:absolute;
left:50%;
top:50%;
margin:-150px 0 0 -250px;
}

Тепер друге завдання. Тут просто. Створюємо розмітку дочірнього блоку:

І його стилі:

.child{
width:200px;
height:100px;
border:1px solid #000;
position:absolute;
left:100px;
top:50px;
}

Нічого нового тут немає — все теж ми робили з автомобілем за тим винятком, що тут батьківський блок має властивість position:absolute (у першому прикладі для батьків ми встановлювали position:relative). Однак тут ми все одно отримали потрібний результат, оскільки неважливо яке властивість задано для батьків (absolute або relative) — дочірній блок все одно буде позиціонується щодо батьків.

І останнє завдання. Властивість position:fixed ми поки що не працювали, але нічого складного там також немає. Дана властивість дуже схоже на position:absolute за одним винятком: елемент з такою властивістю «прив’язується» до точки вікна браузера з вказаними координатами.

Створюємо розмітку:

Та стилі:

.fix{
width:20px;
height:150px;
border:1px solid #000;
position:fixed;
top:200px;
left:0;
}

Таким чином, ми вказали, що блок завжди буде прилягати до лівої кордоні документа (left:0;) і завжди буде мати відступ від верхньої межі 200 пікселів (top:200px;). Для того, щоб переконатися в цьому, достатньо збільшити висоту блоку з класом block для отримання смуги прокручування. Тепер, якщо прокручувати документ, фіксований блок завжди буде займати одну і ту ж позицію щодо вікна браузера.

От і все. Як і говорив, нічого складного в свойсте position немає, але використовуючи цю властивість можна створювати сайти з досить складним дизайном. На цьому наш урок закінчено. Ваші запитання, відгуки завжди будемо раді бачити в коментарях. Удачі у Ваших розробках і до нових зустрічей!