На світанку дизайнерської думки розмітка HTML докуменов здійснювалася в основному за допомогою таблиць. Таблиці використовували скрізь, де тільки можна. Наприклад, щоб зробити відступ зліва, робили порожню колонку таблиці. Якщо необхідно було розмістити кілька елементів всередині комірки таблиці, туди вставляли ще одну вкладену таблицю.
У підсумку, кінцевий код документа був дуже сильно вкладений код, що складається з величезної кількості таблиць. Це іноді мені нагадує програми на бейсике, які ми писали в школі. Ми тоді не знали, що існують функції і процедурне програмування, тому наші програми були однією суцільною "макарониною" з глибоким рівнем вкладеності.
Зараз, все більшої популярності (особливо в стилі Web 2.0) набирає без-табличний спосіб верстки веб сторінок на основі CSS властивості position. Навіть в деяких вакансіях я бачив основна вимога до веб дизайнеру це вміння без таблиць верстати HTML код.
Як встановити позиціонування елементів
Для установки позиціонування існує CSS властивість position. Воно може приймати одне з п'яти значень:
За замовчуванням значення цей властивості рівне - static. Тобто якщо значення властивості position явно не вказано, то елемент буде статично позиціонується. Це важливо. Значення властивості position не успадковується по-замовчуванню. Щоб значення наследовалось від батьківського елемента, необхідно для дочірнього елемента явно виставити властивість position рівним inherit, наприклад, так:
a.link position: inherit;
>
В даному випадку позиціонування посилання буде таким же як і у батьківського елементу.
статична позиціонування
Статична позиціонування - це, взагалі-то, і не позиціонування зовсім. Його не потрібно вказувати явно, так як це значення за замовчуванням. Один з можливих варіантів його явного використання - це скасовувати глобальне правило застосоване раніше. Ось простий приклад:
В даному випадку всім елементам div призначено абсолютне позиціонування. А ось у тих елементів, у яких встановлено id = "new" позиціонування буде статичним. Грубо кажучи, друге правило скасовує першу для деяких елементів.
Статична позиціонування означає, що елемент розташовується відразу ж після елемента, який передує йому в структурі документа HTML.
відносне позиціонування
Відносне позиціонування - це позиціонування відносно. самого елемента. Як це не дивно звучить - це правда.
Ось як це працює в теорії: положення елемента в контексті розмітки сторінки залишається тим же, як якби позиціонування було статичним. А ось відображається елемент в іншому місці, координати якого задаються щодо його статичного положення.
Можливо, що це не зовсім зрозуміло. Тому, розглянемо приклад:
У самому верху великого прямокутника повинен розташовуватися div, у якого id = test1. Але, так як ми задали для нього відносне позиціонування (значення top і left), то він відображається на 30 піскселей вище і на 30 пікселів правіше (верх зрушать на -30 і лівий край на 30).
Йдемо далі. Здавалося б, ми прибрали елемент test1. Однак, подивіться на елемент test2. Він розташований так, як якщо б елемент test1 не був би зрушений (тобто був би статично позиціонується).
Ось це і є головна особливість динамічного позиціонування. Елемент відображається зсунутим, однак, структура веб документа не змінюється.
Що б задати зміщення елемента від його початкової позиції існує чотири властивості: left, right, top, bottom. Ці властивості означають - наскільки повинен бути зміщений відповідний край елемента: лівий, правий, верхній, нижній. Значення цих властивостей можуть бути негативними, що означає зсув в протилежну сторону (для left і right - вліво, для top і bottom - вгору).
Відповідно, немає сенсу вказувати одночасно властивості top і bottom, так само як left і right. Один з цих параметрів буде проігнорований.
Майте на увазі, що для комірок таблиць поведінку цих елементів в стандарті CSS 2.1 не визначене, тому краще не використовуйте ці властивості для таблиць.
Може здатися, що застосування відносного позиціонування досить обмежена. Але далі ми побачимо, як можна використовувати цю властивість.
абсолютне позиціонування
Якщо для елемента встановлено абсолютне позиціонування, то він повністю видаляється зі структури HTML документа. Тобто, документ генерується так, як якщо б елемента не існувало. Після цього зверху "накладаються" абсолютно позиціонуються.
Для завдання положення елемента з абсолютним позиціонуванням використовуються всі ті ж чотири властивості: left, top, bottom, right. Ось тільки сенс у цих властивостей відрізняється від їхнього змісту при відносному позиціонуванні. При абсолютному позиціонуванні ці властивості задають положення чотирьох кутів елемента.
Значення кутів можуть бути задані в одиницях довжини (наприклад, в пікселях) або у відсотках. Процентне значення для властивостей top і bottom визначають процентне відношення від висоти (height) містить блоку. Процентне значення для властивостей left і right визначають процентне відношення від ширини (width) містить блоку.
Що таке "містить блок"?
Це дуже хороше запитання. Зараз ми дізнаємося, чому це важливо знати і розуміти.
Ось що говорить специфікація CSS 2.1 про "містить блоці" (containing block):
Якщо для елемента встановлено абсолютне позиціонування, що містить блоком є найближчий предок, який має абсолютну, відносну або фіксоване позиціювання. Якщо такого предка не існує, то що містить блоком є "базовий містить блок" (initial containing block).
Спробуємо розібратися. З предком все зрозуміло. Найближчий попередник з позиціонуванням відмінним від статичного і є що містить елемент.
А ось як бути, якщо немає предків, які були б явно позиціоновані? І що означає поняття "базовий містить блок"?
Звернемося ще раз до специфікації CSS:
Іншими словами, ми можемо припускати, що базовий містить елемент - це сам html документ. Тобто, перший елемент, який має абсолютне позиціонування, буде позиціонується щодо всього документа. Припускати можемо, але покладатися я б не радив. Бо специфікація віддає це на відкуп браузеру (user agent).
Це не завжди зручно. Набагато зручніше позиціонувати елемент, починаючи з певного місця документа. Домогтися цього можна за допомогою відносного позиціонування.
Пам'ятайте я згадував, що розповім про те, як можна використовувати елементи з відносним позиціонуванням? Так ось, зараз ми дізнаємося відповідь на це питання.
Для позиціонування елемента абсолютно, але, вважаючи від якогось іншого елемента, потрібно зробити так, щоб цей інший елемент (який повинен бути предком в ієрархії HTML документа) став містить блоком. Це можна зробити, присвоївши властивості position значення relative і не змінюючи властивостей для зсуву елемента (left, top, bottom, right).
Для абсолютно позиціонованого елемента властивості left, top, bottom, right задають зміщення кутів елемента від відповідних кутів містить блоку. Таким чином, right: 30px означає, що правий кут елемента повинен бути зміщений на 30 пікселів від правого краю містить блоку.
Ось як в теорії це повинно працювати:
Але не всі браузери слідують стандартам HTML і CSS. Одним, з найголовніших "поганців" є Internet Explorer від Microsoft.
В даному випадку, IE, надходить в такий спосіб. Якщо вказані обидва властивості, наприклад, top і bottom, або left і right, то IE ігнорує друге значення. Тобто якщо вказані значення і top, і bottom одночасно, то IE застосує тільки top, а bottom проігнорує.
"Перемогти" така поведінка IE можна задавши тільки властивості top і left, і явно вказавши ширину (width) і висоту (height) для елемента. Ось приклад:
Даний код буде однаково відображатися у всіх браузерах, хоча і виглядає не так елегантно як завдання всіх чотирьох властивостей. А все через те, що IE - найпопулярніший браузер в світі. Чи не хочете перейти на FireFox або Opera. )
Для будь-якого з чотирьох властивостей може бути задано значення auto. Це означає, що значення цієї властивості береться, як якщо б елемент був статично позиціонується. Це зручно, якщо потрібно зрушити елемент в будь-якому одному напрямку. Наприклад, для зсуву елемента на 8 пікселів вправо, можна написати так:
Фксірованное позиціонування
Фіксоване позиціювання дуже схоже на абсолютне. Єдина відмінність - це те, що містить блок - це завжди вікно браузера.
Навіть коли ви прокручуєте вікно, такий елемент все одно буде перебувати на тому ж самому місці сторінки.
Але, треба віддати належне Microsoft. Вони хоч і повільно але призводять свій браузер до стандартів. Зокрема, в IE7 position: fixed існує і навіть працює як і повинно. Може бути коли-небудь, ми доживемо до IE, який підтримує повністю всі стандарти :).
Властивість Z-index
Щодо позиційований елементи розташовуються в одному місці, а відображаються в іншому. Абсолютно і фіксоване позиційований елементи видаляються зі структури документа. У всіх трьох випадках, можливо, що деякі елементи будуть перекривати один одного.
Щоб явно вказати в якій послідовності елементи будуть відображатися, і було введено властивість z-index. Допустимі значення цієї властивості - цілі числа (в тому числі і негативні).
Z-index - це як би третій вимір веб сторінки. Чим більше значення властивості z-index, тим ближче до користувача (тобто до вас) знаходиться елемент сторінки.