Абсолютное позиционирование слоя на веб-странице
Сегодня я продолжу тему начатую в уроках "Свойства CSS: margin и padding", "Создание двух колонок с помощью отступов и слоев", и рассмотрю абсолютное позиционирование слоев на веб странице. Под слоем я буду понимать блочный элемент - тегb div или span к которому применяются стили.
Современный подход к верстке веб-страниц предполагает активное использование слоев вместо таблиц. Слои представляют собой элемент веб - страницы, видом и положением которых можно управлять с помощью стилей, что позволяет накладывать слои друг на друга, а так же динамически менять параметры. Это позволяет создавать в документе разные эффекты, такие как выпадающие меню, разворачивающиеся баннеры, плавающие окна и т.д.
Рассмотрим управление положением слоя с помощью абсолютного позиционирования.
Вначале следует указать ширину и высоту слоя width и height. Размеры можно задавать в процентах или других единицах. Ширину, например, можно определить в процентах а высоту в пикселах.
Затем, задаем абсолютное позиционирование слоя через аргумент position: absolute. При абсолютном позиционировании отсчет координат ведется от левого верхнего угла окна браузера.
Чтобы слой размещался по центру веб-страницы, зададим ему положение 50% слева и сверху через свойства left и top. Поскольку отсчет координат ведется от левого верхнего угла слоя , то слой придется сдвинуть от полученного положения на половину его ширины влево и на половину высоты вверх. Это достигается с помощью параметров margin-left и margin-top
Ширина и высота слоя напрямую связана с отступами слева и сверху, если требуется установить значение одного из параметров в процентах, тогда нужно поменять запись и у другого параметра. Указанная особенность позволяет применять любые единицы измерения, а не ограничиваться только одной формой записи, что делает код подходящим практически для всех случаев.
<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">
</div>
</body>
</html>
В данном примере привязка слоя к стилям происходит через идентификатор center_position. Ширина слоя составляет 646 пикселов, разделив его пополам, получим число 323, которое выступает в качестве значения параметра margin-left. Отрицательные координаты получаются вследствие того, что сдвиг происходит в сторону , противоположенную новой оси координат.
Удобство применения стилей и слоев, заключается в том, что они позволяют располагать один элемент веб-страницы поверх другого. Например, слои пригодятся когда изображение отображается поверх уже существующего контента типа текста. Такой подход используется для создания различных эффектов на веб-странице: всплывающих окон, рекламы, контекстных меню ит.д.
За счет того, что у слоя задается абсолютное позиционирование, он помещается поверх остальных элементов веб-страницы , поэтому никаких дополнительных параметров вводить не требуется.
Для того чтобы лучше понять идеологию абсолютного и относительного позиционирования элементов на веб странице рекомендую прочитать пост Абсолютное и относительное позиционирование элементов на странице , а вопросы управления положением слоя с помощью z-index и относительного позиционирования объектов рассмотрены в посте Управляем положением слоя с помощью z-index.
Автор: Сергей Зарубин
Дата: 2011-05-04
Колличество просмотров: 6281
|
|
Нравится |
Комментарии к заметке:
Добавить новый комментарий
