CSS дає можливість роботи з шарами: фрагментами HTML, які можна розміщувати на веб-сторінці шляхом накладення їх один на одного з точністю до пікселя. Синтаксис для роботи з шарами розроблений і схвалений наприкінці 1996 року в робочому проекті консорціуму «CSS Positioning (CSS-P)». Даний проект для позиціонування елементів практично однаково підтримується браузерами Internet Explorer 4.0 і Netscape 4.0 за винятком ряду дрібних відмінностей. Однак об’єктні моделі браузерів для динамічного управління шарами за допомогою JavaScript відрізняються. У цьому й криється основна проблема для веб-розробників, які використовують шари у своїх програмах.
Основи
Шар 1 зверху
Шар 2 зверху
Код HTML для прикладу показано нижче.
Приклад 1. Створення шарів
<html> <body> Шар 1 зверху <div style="position: relative; font-size: 50px; z-index: 1; color: navy;">Шар 1</div> <div style="position: relative; left: 5px; color: orange; font-size: 80px; z-index: 0;">Шар 2</div> <br> <br>Шар 2 зверху <div style="position: relative; font-size: 50px; z-index: 2; color: navy;">Шар 1</div> <div style="position: relative; left: 5px; color: orange; font-size: 80px; z-index: 3;">Шар 2</div> </body> </html>
Для створення шарів слід використовувати тег DIV або SPAN. Ці теги взаємозамінні і розрізняються лише зовнішнім виглядом в браузері. Якщо потрібні відступи до і після тексту, слід використовувати елемент DIV. При розміщенні тексту всередині параграфа застосовується тег SPAN.
Тип позиціонування визначається параметром position, положення елемента двома координатами top і left, а порядок шару значенням z-index.
Позиціонування шару
Властивість 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 для зміни положення шарів відносно один одного.
Властивість visibility
Для відображення або приховання шару використовується параметр visibility. Він може приймати значення visible, встановлене за замовчуванням, для показу шару, і hidden, яке його ховає.
<div style="visibility: hidden">Захований шар</div>
Динамічне управління відображенням шару дозволяє створювати меню, що випадають, анімацію на веб-сторінці, згортають і розгортають вікна та багато іншого.
***
Це переклад статті.
Рецепти HTML