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

1. Box-модель в CSS і типи позиціонування.
2. абсолютне позиціонування
3. Відносне позиціонування.
4. фіксоване позиціювання
5. Z-index
6. Проблеми позиціонування.
7. висновок

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

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

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

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

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

• absolute
• relative
• fixed
• static
• inherit

Значення 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 додає третій вимір, глибину.

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

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

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

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

1. Ви не можете одночасно використовувати властивість position і властивість float для одного і того ж елемента. Обидва ці властивості впливають на позицію елемента, тому використовуватися буде властивість, вказане останнім. З коментарів:

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

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

2. Зовнішні відступи не «схлопиваются" у елементів з абсолютним позиціонуванням. Припустимо на сторінці є параграф з нижнім відступом в 20px. Слідом за ним розміщується картинка з верхнім полем 30px. Відстань між картинкою і текстом буде не 50px (20px + 30px), а 30px (30px> 20px). Така поведінка називається collapsing margins . Два відступу комбінуються в один. У елементів з абсолютним позиціонуванням немає полів для "схлопування", тому результат може відрізнятися від очікуваного.
3. IE і z-index. В IE6 вибір елемент відбувається завжди на вершині стека, незалежно від його z-index-а, z-index-ів оточуючих елементів.

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

<Div style = "z-index: 0"> <p style = "z-index: 10"> </ p> </ div> <img style = "z-index: 5" />

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

висновок

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

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

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

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