Позиціювання в CSS, CSS-Tricks по-українськи

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

Box-модель у CSS та типи позиціонування.

Перш ніж приступити, раджу вам прочитати статтю Box-модель у CSS. У двох словах: кожен елемент у html - це прямокутник, для якого можна вказати величини внутрішніх та зовнішніх відступів, а також межу, яка поділяє їх.

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

Властивість position у CSS може приймати п'ять значень:

Значення static використовується за замовчуванням. Будь-який елемент з позиціонуванням static знаходиться в загальному потоці документа. Правила його розміщення визначаються Box-моделью. Для таких елементів, властивості top, right, bottom та left ігноруватимуться. Щоб використовувати ці властивості, позиціонування елемента має бути абсолютним (absolute), відносним (relative) чи фіксованим (fixed).

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

Абсолютне позиціонування

Абсолютне позиціонування видаляє елемент із загального потоку документа. Що стосується елементів навколо, то в цьому випадку вони просто ігнорують шуканий, ніби йому встановлено властивість display: none; Якщо ви не хочете, щоб простір для такого елемента заповнювався іншими елементами, то вам потрібно придумати інший підхід.

Ви встановлюєтерозташування елемента з абсолютним позиціонуванням, використовуючи властивості top, left, right та bottom. Вам достатньо вказати два з них, top або bottom та left або right. Якщо жодної властивості не вказано, встановлюється 0 для пари top-left.

Ключовий момент в абсолютному позиціонуванні – це розуміння того, що є точкою відліку. Якщо властивості top вказано значення 20px, звідки їх необхідно відраховувати.

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

Відносне позиціонування.

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

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

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

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

Фіксоване позиціонування

Фіксоване позиціонування діє подібно до абсолютного, з невеликими відмінностями.

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

Друга відмінність виходить із його назви. Фіксовані елементи зафіксовано на сторінці. Вони не зміщуються при її прокручуванні.

Сторінка сайту двовимірна. У неї є ширина та висота. Z-index додає третій вимір, глибину.

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

Насправді z-index набагато складніший, ніж я його тут описую, але це тема для окремої статті. Зараз, головне запам'ятати саму ідею третього виміру і те, що тільки елементи, що позиціонуються, можуть використовувати цю властивість.

Проблеми позиціонування.

Розглянемо кілька загальних проблем, пов'язаних із позиціонуванням, а також кілька слів про їх вирішення.

Ви не можете одночасно використовувати властивість position і властивість float для одного і того ж елемента.

Одночасно можна використовувати position:relative та float.

Коли одночасно вказується position:absolute і float, то застосовується не остання вказана властивість. В цьомуу випадку, незалежно від порядку дотримання цих стилів, застосовується position:absolute, а підсумкове (або обчислене) значення якості float встановлюється в none, незалежно від початкового значення, тобто. ігнорується.

У IE6 та IE7 є ще одна проблема з z-index-ом. IE дивиться на батьківський елемент визначення у якій групі елементів перебуває вершина стека, інші браузери використовують глобальний контекст. Наприклад:

Ми очікуємо, що параграф буде вище, ніж зображення, оскільки його z-index більше. Однак IE6 і IE7 мають вище картинку, оскільки вони знаходяться в різних стеках документа. Один стек для div, другий для img, а у картинки z-index вищий, ніж у div-а.

Висновок

Властивість position встановлює поведінку розташування елемента відповідно до однієї зі схем позиціонування. Доступні значення властивості: absolute, relative, fixed, static (за умовчанням) та inherit.

Схеми позиціонування визначають правила розміщення елемента на web-сторінці, і навіть впливом геть розташування сусідніх елементів.

Властивість z-index може бути застосовано лише для елементів із встановленою властивістю position. Воно додає третій вимір на сторінці та встановлює порядок стека елементів.

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