Позиціонування елементів. Абсолютні та відносні координати. орядок накладання об’єктів, z-index.

Позиціонування елементів

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

Властивості CSS, які мають відношення до позиціонування, наведені в таблиці.

Властивість	Значення	NC	IE	W3C	Опис	Приклад
bottom	auto, %, значення	6+	5+	CSS2	Визначає положення нижнього краю елемента щодо його батька.	P { bottom: 20% }
clip	auto, форма	6+	4+	CSS2	Визначає область вирізки елемента.	P { clip: rect(10px 110px 80px 20px) }
left	auto, %, значення	4+	4+	CSS2	Визначає положення лівого краю елемента щодо його батька.	P { left: -100px }
overflow	visible, hidden, scroll, auto	6+	4+	CSS2	Відображення смуг прокрутки, якщо зміст не поміщається в задану область.	DIV {overflow: scroll }
right	auto, %, значення	-	5+	CSS2	Визначає положення нижнього краю елемента щодо його батька.	P { right: 20px }
top	auto, %, значення	4+	4+	CSS2	Визначає положення верхнього краю елемента щодо його батька.	P { top: 50% }
vertical-align	baseline, sub, super, top, text-top, middle, bottom, text-bottom, %, значення	4+	4+	CSS1	Вертикальне вирівнювання елемента щодо базової лінії.	SPAN.sup {vertical-align: super }
z-index	auto, номер	6+	4+	CSS2	Порядок елемента при накладанні декількох елементів один на одного.	.top { z-index: 10 }

 

Положення елемента

Положення координат елемента залежить від властивості position, якій зазвичай присвоюють значення absolute (абсолютне) або relative (відносне).

При абсолютному позиціонуванні елемент розміщується відносно лівого верхнього кута вікна документа за допомогою параметрів left і top (мал.1). У разі розміщення шару всередині іншого, абсолютні координати рахуються від лівого верхнього кута батьківського шару (мал. 2).

Мал. 1. Положення шару щодо вікна браузера

Крім тегів DIV і SPAN абсолютне позиціонування підтримують такі елементи: APPLET,INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

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

Мал. 2. Положення шару щодо батьківського елементу

Останні версії браузерів стали підтримувати ще один спосіб розміщення елементів на веб-сторінці – через властивості bottom і right, що визначають положення правого нижнього кута елемента. Поки, однак, таке завдання координат не так поширене і обмежене тим, що не всі браузери його підтримують. Тому більш традиційним варіантом можна вважати визначення положення елемента за допомогою параметрівleft і top.

Позиціонування шару

Властивість position може приймати одне з трьох значень: static (статичне), absolute(абсолютне) та relative (відносне). Параметр static за замовчуванням не робить ніякого впливу на розташування шарів.

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

Крім тегів DIV і SPAN абсолютне позиціонування підтримують наступні елементи:
APPLET, INPUT, BUTTON, OBJECT, SELECT, FIELDSET, IFRAME, TABLE, IMG, TEXTAREA.

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

Положення шару

У той час як властивість position вказує тип системи координат, параметри top і leftвизначають точну позицію шару. Значення цих параметрів можуть визначатися у відсотковому відношенні або пікселах, приймати позитивні і негативні величини. Це дає можливість розміщувати контент вище або нижче на сторінці незалежно від фізичної позиції коду HTML. Тобто, у верхній частині сторінки можна помістити шар, який описаний внизу HTML-документа.

Положення шару можна змінювати динамічно за допомогою JavaScript. Це дозволяє змінювати розташування елементів вже після завантаження сторінки. Подібна техніка застосовується при створенні банерів, ігор, випадаючих меню та ін.

Властивість z-index

Властивість z-index визначає порядок шарів, або їх перекриття по відношенню до інших верств. За замовчуванням всі верстви позиціоновані зі значенням z-index рівним нулю. Інші шари можуть розміщатися нижче шляхом установки від’ємного значенняz-index. Для шарів, у яких z-index не встановлений, це значення призначається неявно відповідно до їх становища у документі. Тому шар, який поміщений в документ пізніше, розміщується вище за інших елементів, які були позиціоновані раніше.

У прикладі, наведеному на початку, показано використання параметра z-index для зміни положення шарів відносно один одного.