Работа со слоями и позиционированием

Концепция слоя или уровня была разработана и впервые предложена компанией Netscape. Их теги <LAYER> и <ILAYER> были во многом похожи на <FRAME> и <IFRAME>. Однако, со временем, их на замену пришло и практически полностью вытеснило оригинальное решение от Microsoft. Было предложено рассматривать отдельные блоки текста, в тегах <SPAN> или <DIV>, как слои, организовав управление ими при помощи их свойств.

Применение слоев позволяет создать на странице некоторое подобие трехмерного пространства. На деле это лишь плоские слои с заданным порядком перекрытия, например, как в колоде карт. С помощью таблиц стилей CSS мы можем задавать различные свойства слоям и позиционировать их. Это предоставляет перед web-мастером массу возможностей, позволяет создавать страницы, которые выглядят более профессионально, и, в большинстве случаев, избавляется от необходимости использовать таблицы для позиционирования содержимого.

Абсолютное позиционирование

Как и любое другое свойство, свойство Position задается при помощи таблиц стилей CSS.

Синтаксис: {position: absolute}

Оно может принимать следующие значения:

position:absolute — означает, что позиционирование слоя будет происходить относительно левого верхнего угла страницы.
position:relative — означает, что позиционирование слоя будет происходить относительно того места, где в исходном тексте он находится, то есть относительно предыдущего элемента.
position:static — означает, что позиционирование слоя будет происходить относительно фона.

Горизонтальное позиционирование

Позиционирование по горизонтали задается свойством left, путем задания отступа по оси X левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position.

Синтаксис: {left: значение}

Может принимать значения:

npx
n%
auto

Вертикальное позиционирование

Позиционирование по вертикали задается свойством top. Атрибут позволяет задать Y-координату левого верхнего угла слоя относительно точки отсчета, которая определяется свойством Position.

Синтаксис: {top: значение}

Может принимать значения:

npx
n%
auto

Задание высоты слоя

Свойство height позволяет задать высоту слоя в окне браузера.

Синтаксис: {height: значение}

Может принимать значения:

npx
n%
auto

Задание ширины слоя

Свойство width позволяет задать ширину слоя в окне браузера.

Синтаксис: {width: значение}

Может принимать значения:

npx
n%
auto

Позиционирование в глубину

Свойство z-index позволяет задать порядок перекрытия слоев друг другом. Слой с более высоким индексом будет располагаться над слоем с низким индексом. Если атрибут не задан специально, браузер присваивает более высокий индекс слою, который в исходном коде описан позже.

Синтаксис: {z-index: 2}

Может принимать значения:

auto
порядковый номер

Управление видимостью

Свойство visibility позволяет задать видимость слоя, присвоив ему одно из следующих значений:

Синтаксис: {visibility: inherit}

Может принимать значения:

inherit
hidden
visible

Понятие прозрачности слоя

Так как слой на самом деле представляет собой блок содержимого, заключенный в тегах <SPAN> или <DIV>, то при помощи таблиц стилей CSS можно отформатировать его любым из доступных способов: наложить фильтр, задать фоновый цвет или рисунок, задать стили вложенным тегам. Если слой не имеет фонового цвета или рисунка, мы сможем увидеть сквозь него содержимое того слоя, над которым он позиционирован. Такое можно достичь, вставив рисунок .gif, у которого один из цветов прозрачный. Используя это свойство, можно добиться интересных эффектов, которые недоступны другими способами, улучшая внешний вид и эстетическое восприятие содержимого.

Наложение слоев

Один из самых интересных способов применения свойств слоя — это одновременное оперирование позиционированием сразу для двух слоев или более. Задав свойствам Position значение absolute и варьируя значения свойств left, top, height, width и z-index, мы получим интересный эффект наложения слоев друг на друга, частичного или полного перекрытия содержимого.