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


    Сегодня я продолжу тему начатую в уроках "Свойства CSS: margin и padding", "Создание двух колонок с помощью отступов и слоев", и рассмотрю абсолютное позиционирование слоев на веб странице. Под слоем я буду понимать блочный элемент - тегb div или span к которому применяются стили.

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

    Рассмотрим управление положением слоя с помощью абсолютного позиционирования.

    Вначале следует указать ширину и высоту слоя width и height. Размеры можно задавать в процентах или других единицах. Ширину, например, можно определить в процентах а высоту в пикселах.

    Затем, задаем абсолютное позиционирование слоя через аргумент position: absolute. При абсолютном позиционировании отсчет координат ведется от левого верхнего угла окна браузера.

    Чтобы слой размещался по центру веб-страницы, зададим ему положение 50% слева и сверху через свойства left и top. Поскольку отсчет координат ведется от левого верхнего угла слоя , то слой придется сдвинуть от полученного положения на половину его ширины влево и на половину высоты вверх. Это достигается с помощью параметров margin-left и margin-top

    Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, тогда нужно поменять запись и у другого параметра. Указанная особенность позволяет применять любые единицы измерения, а не ограничиваться только одной формой записи, что делает код подходящим практически для всех случаев.

Абсолютное позиционирование слоя на веб-странице
<html>
<head>
<style type="text/css">
#center_position {
width: 646px;
height:482;
position: absolute;
left: 50%;
top: 50%;
margin-left: -323px;
margin-top: -241px;
background: #99CDFF;
border: 3px solid black;
padding: 5px;
overflow: auto;
}
</style>
</head>
<body>
<div id="center_position">&nbsp;
</div>
</body>
</html>

    В данном примере привязка слоя к стилям происходит через идентификатор center_position. Ширина слоя составляет 646 пикселов, разделив его пополам, получим число 323, которое выступает в качестве значения параметра margin-left. Отрицательные координаты получаются вследствие того, что сдвиг происходит в сторону , противоположенную новой оси координат.

    Удобство применения стилей и слоев, заключается в том, что они позволяют располагать один элемент веб-страницы поверх другого. Например, слои пригодятся когда изображение отображается поверх уже существующего контента типа текста. Такой подход используется для создания различных эффектов на веб-странице: всплывающих окон, рекламы, контекстных меню ит.д.

    За счет того, что у слоя задается абсолютное позиционирование, он помещается поверх остальных элементов веб-страницы , поэтому никаких дополнительных параметров вводить не требуется.

    Для того чтобы лучше понять идеологию абсолютного и относительного позиционирования элементов на веб странице рекомендую прочитать пост Абсолютное и относительное позиционирование элементов на странице , а вопросы управления положением слоя с помощью z-index и относительного позиционирования объектов рассмотрены в посте Управляем положением слоя с помощью z-index.

Автор: Сергей Зарубин

Дата: 2011-05-04

Колличество просмотров: 5789

Нравится

Комментарии к заметке:



Добавить новый комментарий


Введите число с картинки:

captcha