Фиксированный дизайн. Наложение слоев
Основная особенность слоев и их основное отличие в использовании от других способов верстки — точное позиционирование и способность накладываться друг на друга. Благодаря этой особенности с помощью слоев можно создавать разные эффекты на веб-странице.
Существует несколько способов создания наложения. Самый простой из них, но при этом и менее гибкий — использование абсолютного позиционирования.
Абсолютное позиционирование
Абсолютное позиционирование позволяет накладывать слои в любом порядке друг на друга. Но при этом требуется знать точные координаты каждого слоя относительно одного из углов окна браузера, что не всегда возможно. Поэтому данный подход имеет ограниченную область применения, например для создания верхнего меню, когда его положение не меняется и точно зафиксировано.
При использовании наложения требуется присвоить свойству position значение absolute. Само положение слоя регулируется параметрами left, top, right и bottom которые задают координаты соответственно от левого, верхнего, правого и нижнего края (пример 1). Поскольку вывод содержимого слоя осуществляется в заданное место, то порядок описания слоев указывает и порядок их наложения друг на друга. Самый первый слой, приведенный в коде веб-страницы, будет располагаться на заднем плане, а самый последний — на переднем. Порядок также можно менять с помощью атрибута z-index. Чем больше его значение, тем выше располагается текущий слой относительно других слоев.
Пример 1. Абсолютное позиционирование
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/css">
#rightcol {
position: absolute; /* Абсолютное позиционирование */
left: 350px; /* Положение левого края */
top: 50px; /* Положение верхнего края */
width: 120px; /* Ширина слоя */
background: #e0e0e0; /* Цвет фона */
border: solid 1px #000; /* Параметры рамки */
}
#leftcol {
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение левого края */
top: 0; /* Положение верхнего края */
width: 400px; /* Ширина слоя */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
}
</style>
<body>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
</body>
</html>
В данном примере положение слоя с именем leftcol устанавливается в левом верхнем углу окна браузера, а слой rightcol смещен на 350 пикселов вправо от левого края окна и на 50 пикселов вниз. Заметьте, что значения left и top следует указывать обязательно для всех слоев, чтобы получилось нужное наложение с заданными координатами.
Более интересный подход к созданию наложения — использование относительного позиционирования. В этом случае слои можно размещать по центру окна браузера или располагать их в любом месте веб-страницы, не задумываясь уже над значением координат слоев.
Относительное позиционирование
Чтобы наложить один слой на другой и не привязываться жестко к координатной сетке, можно попробовать следующий подход. Для первого слоя, который будет располагаться на заднем плане, указываем абсолютное позиционирование, присваивая параметру position значение absolute. Второй слой, расположенный поверх первого, должен иметь относительное позиционирование, что достигается с помощью значения relative у параметра position. Положение верхнего слоя определяется от левого верхнего угла нижнего слоя заданием атрибутов left и top (рис. 1).
Рис 1. Задание положения верхнего слоя
В примере 2 ширина слоев задается параметром width, а местоположение верхнего слоя (он называется rightcol) свойствами left и top. Как указывалось выше, порядок наложения слоев определяется их порядком описания в коде или с помощью параметра z-index. Поэтому слой с именем leftcol будет располагаться на заднем плане, поскольку он определен самым первым.
Пример 2. Относительное позиционирование
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: absolute; /* Абсолютное позиционирование */
width: 550px; /* Ширина левой колонки */
background: #e0e0e0; /* Цвет фона содержимого */
padding: 10px /* Поля вокруг текста */
}
#rightcol { /* Этот слой накладывается поверх */
position: relative; /* Относительное позиционирование */
left: 500px; /* Положение от левого края */
top: 20px; /* Положение от верхнего края */
width: 200px; /* Ширина правой колонки */
background: #800000; /* Цвет фона */
color: #fff; /* Цвет текста */
}
</style>
</head>
<body>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка</div>
</body>
</html>
Увы, но данный подход не будет работать как предполагалось в браузере Opera. Даже при установке атрибута z-index, слой с относительным позиционированием (слой с именем rightcol) будет располагаться всегда на заднем плане. В браузерах Internet Explorer, Netscape, Mozilla и Firefox код работает корректно. Если веб-страница ориентирована для просмотра именно в этих браузерах, то приведенный в данном примере код вполне подойдет для создания наложения слоев.
Подход лишенный указанного недостатка, тем не менее, существует. Он связан с относительным позиционированием и использует все разнообразие средств размещения разных слоев.
Универсальный подход
Теоретически, можно разместить слои по вертикали друг под другом и поднять нижний слой вверх с помощью параметра top, задавая ему отрицательное значение или с помощью атрибута bottom. На практике добиться подобного довольно сложно, ведь определить высоту слоя простыми средствами, а, следовательно, и величину, на которую следует смещать слой, не представляется возможным, поскольку она зависит от размера шрифта, содержимого слоя и многих других параметров. Проще отсчет координат вести от верхнего угла одного из слоев. Для этого следует разместить слои рядом по вертикали, а потом уже смещать один слой относительно другого.
Реализуется это следующим способом. У каждого слоя необходимо указать параметр float: left, который позволяет один слой пристыковать к другому справа. Добавлять float следует для каждого слоя, иначе в некоторых браузерах появится промежуток между слоями.
Теперь слои располагаются рядом, и прежде, чем указывать координаты, задаем относительное позиционирование аргументом relative параметра position. Положение верхнего слоя управляется значением left и top. Но поскольку отсчет координат в данном случае ведется от левого верхнего угла второго слоя, по горизонтали нужно указывать отрицательное значение (рис. 2). Впрочем, можно использовать также параметр bottom.
Рис. 2. Задание положения верхнего слоя
В примере 3 верхний слой с именем rightcol смещается на 50 пикселов по горизонтали и вертикали. Чтобы он не закрывал при наложении содержимое слоя leftcol, справа у текста делается отступ параметром padding-right.
Как видно из примера, для создания наложения слоев требуется задать всего два параметра у нижнего слоя и четыре у верхнего. Остальные атрибуты управляют видом самих слоев и их содержимого.
Пример 3. Создание наложения слоев
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: relative; /* Относительное позиционирование */
float: left; /* Совмещение колонок по горизонтали */
width: 400px; /* Ширина слоя */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
}
#rightcol {
position: relative; /* Относительное позиционирование */
float: left; /* Совмещение колонок по горизонтали */
left: -50px; /* Сдвиг слоя влево */
top: 50px; /* Смещение слоя вниз */
width: 120px; /* Ширина слоя */
background: #e0e0e0; /* Цвет фона */
border: solid 1px black; /* Параметры рамки */
}
#leftcol P {
padding: 10px; /* Поля вокруг текста */
padding-right: 50px; /* Значение поля справа */
margin: 0; /* Обнуляем значения отступов */
}
#rightcol P {
padding: 10px; /* Поля вокруг текста */
padding-top: 0 /* Значение поля сверху */
}
</style>
</head>
<body>
<div id="leftcol">
<p>Левая колонка </p>
</div>
<div id="rightcol">
<p>Правая колонка</p>
</div>
</body>
</html>
Результат действия данного примера приведен ниже (рис. 3).
Рис. 3. Результат действия примера
| Статья опубликована: 07.04.2006 | Последнее обновление: 01.05.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
Lexx
10.04.2006
Flanker
12.04.2006
oper
13.04.2006
Пробовал на Opera 9 вроде все работает...
oper
13.04.2006
Влад Мержевич
13.04.2006
Насчет разницы между рис. 3 и текстом в примере 3. Да, различаются, код сокращен несколько. Решил, что подобное несовпадение не так уж и принципиально.
ChizZ
18.04.2006
Есть менюшка - 6 слоев (пунктов) с наложением друг на друга. Слои (пункты) расположены по горизонтали (в каждом слое картинка, накладывающаяся на соседнюю).
Как выровнять все меню по центру (горизонтально), чтобы относительное положение слоев сохранялось?
Проблема лежит тут: http://chizz.ru/interra/none
ChizZ
18.04.2006
сделал табличку фиксированой ширины (чуть больше суммы ширин всех слоев меню), выровнял ее по центру, вставил туда слои меню, position:relative, float:left... короче работает!
Василиса
06.10.2006
Какие варианты?
Владмир
26.01.2007
В правом слое отсутпы получаются большие в этом броузере. Удалось пофиксить указанием margin: 0px; для #rightcol P.
Почему так?
Влад Мержевич
26.01.2007
К полям (по 10 пикселов в примере) добавляются отступы по умолчанию, поэтому и получаются большие значения.
Владмир
26.01.2007
#rightcol P {
padding-top: 0px /* Значение поля сверху */
}
то отступы остаются. почему? или я не туда смотрю?
Влад Мержевич
29.01.2007
Old Nick
01.03.2007
Юрий
23.03.2007
Либо я не так понял высказывание, либо тут есть ошибка, при относительном позиционировании слой смещаятся отоносительно себя, а к нижнему слою его позиционирование отношения не имеет, это легко можно проверить задавая разные положения для нижнего слоя при это верхний оста?тся на месте при относительном позиционировании.
ZoolooS
23.04.2007
V@dimK@
13.06.2007
не могу понять, почему при изменении значений
left и right у нижнего слоя, верхний слой с относительный
позиционированием не смещается, а остается на месте!
Влад, объясни плз!!!
Или мы с Юрием ничего не понимаем
Влад Мержевич
14.06.2007
Теперь слои слои стоят рядышком и мы должны сдвинуть слой rightcol влево от своего исходного положения. Для этого надо добавить в стили:
left: -50px;
top: 50px;
V@dimK@
14.06.2007
Алексей
16.09.2007
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Нужно обязательно указывать путь к dtd файлу, иначе в ИЕ 6.0 появляются ошибки с паддингом.
Если же указать путь к этому файлу, то код работает нормально во всех 3 браузерах.
PS: проверял на Operе 9.20, Mozille FireFox и IE 6.0
Clubkiss ru
08.10.2007
Влад, извеняюсь, но чессознаюсь, что сп?рто у тебя
... тока вопрос один возник
Весь блок нужно всунуть в уже существующую фиксированную колонку (размер 160px)
слой S тоже 160px - т.е. он как раз вписывается в общий диз и идет впритык по колонке...
две кнопки: скрыть и показать слой P (у тебя на рис 3 это rightcol) естественно что с relative он выпадает вниз и ложится под слоем S (тк в колонке на 160px уже есть слой s)
вопрос в следующем:
есть ли какие возможности прописать, дабы слой P как бы ложился поверх всего сайта, но в тоже время, по координатам привязыватся (позиционировался) именно по слою S
Я думаю что если абсолютным прописать слой S то такое возможно, но тут проблемма в том, что страница "резиновая" и отцентрирована
в ощим звиняйте за масло маслянное, просто пытался более доступно проблему выложить...
сам код:
<head>
<style type="text/css">
#s {
position:relative;
float:left;
width:160px;
background:#113d6a;
color:ffffff;
}
#s P{
padding:10px;
padding-right:50px;
margin:0px;
}
#p {
position:relative;
float:left;
left:-50px;
top:50px;
width:*px;
background:#e0e5eb;
color:#113D6A;
border:solid 1px black;
padding:10px;
padding-top:0px;
}
</style></head>
<body>
<div id="s">
<table width="160" border="1">
<tr>
<td bgcolor="#E0E5EB"><div align="center"><a href="javascript:void(0);" onClick="window.document.all.p.style.visibility='visible';">Показать</a></div></td>
<td bgcolor="#E0E5EB"><div align="center"><a href="javascript:void(0);" onClick="window.document.all.p.style.visibility='hidden';">Скрыть</a></div></td>
</tr>
</table>
<p align="center">Подборка прекрасных и интереснейших статей об интернет знакомствах. </p>
<p align="center">Средь большого многообразия бесплатных сайтов знакомств иногда возникают вопросы на которые они не дают ответы и бросают Вас на произвол судьбы. До многого Вы додумываетесь сами, многое приходит с опытом. Но зачем нам с Вами "создавать велосипед", когда можно воспользоваться чужим опытом?
</p>
</p>
</div>
<div id="p">
<p><a href="http://clubkiss.land.ru/humor.html" target="_blank">Юморные выписки с женских анкеточек</a></p>
<p><a href="http://clubkiss.land.ru/100-gerl.html" target="_blank">100 комплиментов для Не?</a></p>
<p><a href="http://clubkiss.land.ru/100-boy.html" target="_blank">100 комплиментов для Него</a></p>
</div>
</body>
Spartakvladimir
24.05.2008
D365
14.06.2008
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> убила отображение скроллбаров нужного цвета, теперь только один внутренний слой показывает нужный цвет, остальные как по умолчанию. Для цветов скроллбара использую стиль CSS. На странице все собрано с помощью SSI. В чем может быть проблема?
Crusader
20.07.2008