Код HTML для прикладу показано нижче.
Приклад 1. Створення шарів
Шар 1 нагорі
Шар 2 нагорі
Для створення шарів слід використовувати тег 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-документа.
Властивість z-index
Властивість z-index визначає порядок шарів, або їх перекриття по відношенню до інших верствам. За замовчуванням всі верстви позиціоновані зі значенням z-index рівним нулю. Інші шари можуть розміщуватися нижче шляхом установки від'ємного значення z-index (рис. 1). Для шарів, у яких z-index не встановлено, це значення призначається неявно відповідно до їх становищем в документі. Тому шар, який поміщений в документ пізніше, розміщується вище за інших елементів, позиціонуються раніше.
Мал. 1. Розташування шарів
У прикладі, наведеному на початку, показано використання параметра z-index для зміни положення шарів відносно один одного.
властивість visibility
Для відображення або приховування шару використовується параметр visibility. Він може приймати значення visible. встановлене за замовчуванням, для показу шару, і hidden. яке його ховає.
Динамічне управління відображенням шару дозволяє створювати випадають меню, анімацію на веб-сторінці, що згортають і розгортають вікна і багато іншого.