|
Пример 1. Создание слоев
<html>
<body>
Слой 1 наверху
<div style="position:relative; font-size:50px;
z-index:2; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5;
color:orange; font-size:80px; z-index:1">Слой
2</div>
Слой 2 наверху
<div style="position:relative; font-size:50px;
z-index:3; color: navy">Слой 1</div>
<div style="position:relative; top:-55; left:5;
color:orange; font-size:80px; z-index:4">Слой
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 (рис. 1). Для слоев, у которых z-index не установлен, это значение назначается неявно в соответствии с их положением в документе. Поэтому слой, который помещен в документ позже, размещается выше остальных элементов, позиционированных ранее.
Рис. 1. Расположение слоев
В примере, приведенном в начале, показано использование параметра z-index для изменения положения слоев относительно друг друга.
Свойство visibility
Для отображения или скрытия слоя используется параметр visibility. Он может принимать значения visible, установленное по умолчанию, для показа слоя, и hidden, которое его прячет.
<div style="visibility:
hidden">Спрятанный слой</div>
Динамическое управление отображением слоя позволяет создавать выпадающие меню, анимацию на веб-странице, свертывающие и развертывающие окна и многое другое.
Влад Мержевич
htmlbook.ru/
|
