Фиксированный дизайн. Позиционирование
Кроме использования параметра float для размещения рядом по горизонтали двух и более слоев, для этой же цели применяется и параметр position. Сложно оценить, какой подход с применением этих параметров лучше, если они в итоге дают одинаковый результат. Однако у позиционирования заведомо больший потенциал, позволяющий не только располагать слои рядом, но и накладывать их друг на друга. С помощью таких «перекрытий» можно создать выразительный дизайн веб-страниц простыми средствами.
Координаты слоя
Положение слоя в документе зависит от заданных значений стилевых атрибутов left, top, right и bottom, они устанавливают соответственно позицию слоя слева, сверху, справа и снизу. Точка отсчета определяется от параметра position, который принимает обычно значение relative (относительное положение) или absolute (абсолютное положение).
При абсолютном позиционировании слой располагается относительно родительского элемента или окна браузера, если родитель не задан, как показано на рис. 1.
Рис. 1. Положение слоя относительно окна браузера
В случае использования относительного позиционирования, координаты отсчитываются от исходного положения слоя (рис. 2). Здесь пунктиром выделено первоначальное положение слоя, а сплошной линией результат его перемещения.
Рис. 2. Положение слоя относительно исходного положения
Положительные значения параметра left сдвигают слой вправо, отрицательные — влево. С параметром right дело обстоит наоборот, положительные значения этого атрибута смещают слой влево, а отрицательные — вправо. Аналогичная ситуация и с парой top/bottom. Значения со знаком минус параметра top поднимают слой вверх, а положительные значения опускают слой вниз. Аргумент bottom же действует с точностью наоборот.
Заметим, что указание параметра position без упоминания координат (атрибутов left, top, right или bottom) не меняет положение текущего слоя, но оказывает влияние на расположение близлежащих слоев.
Размещение двух слоев
При размещении двух слоев рядом по горизонтали, левому слою необходимо задать абсолютное положение, а правому — относительное (пример 1). Это наиболее универсальный подход, который гарантирует, что слои будут позиционированы правильно относительно друг друга и окна браузера. При этом не имеет значения, как будет располагаться макет — по левому краю или по центру окна — слои не изменят своего положения. Обязательно следует сместить правый слой (в примере он называется rightcol) по горизонтали с помощью параметра left на величину, равную ширине левого слоя. В противном случае слои будут накладываться друг на друга.
Пример 1. Размещение двух слоев
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: absolute; /* Абсолютное позиционирование */
width: 200px; /* Ширина слоя */
background: #800000; /* Цвет фона */
color: white; /* Цвет текста */
}
#rightcol {
position: relative; /* Относительное позиционирование */
left: 200px; /* Смещаем слой вправо на ширину левого слоя */
width: 550px; /* Ширина слоя */
background: #e0e0e0; /* Цвет фона */
padding: 10px; /* Поля вокруг текста */
}
</style>
</head>
<body>
<div id="leftcol">Левая колонка</div>
<div id="rightcol">Правая колонка </div>
</body>
</html>
Несмотря на простоту решения, в данном случае следует учесть несколько моментов.
- Использование параметра position: absolute для левой колонки, хотя и не дает видимого результата, необходимо для того, чтобы правая колонка не «перескакивала» вниз, и слои располагались на одном уровне.
- Положение правого слоя rightcol зависит от значения стилевого параметра left, он в данном случае должен равняться ширине левого слоя, в этом случае слои будут плотно прилегать между собой. Впрочем, ничего не мешает изменять этот параметр в ту или иную сторону. Тогда между слоями появится разделительная полоса или наоборот, слои станут накладываться друг на друга.
- Параметр padding, добавляющий поля вокруг текста, если его использовать в стиле левого слоя leftcol, вносит искажения в макет страницы для браузера Firefox. Это связано с тем, что ширина элемента в этом браузере складывается из значений параметров width, padding и margin. Поскольку добавление полей увеличивает ширину слоя, то правая колонка начинает накладываться поверх левой колонки. Чтобы устранить эту особенность, атрибут padding следует применить к стилю параграфа, который должен располагаться внутри слоя. Также можно добавить еще один внутренний слой и указать поля для него (пример 2).
Пример 2. Поля внутри слоя
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Позиционирование</title>
<style type="text/css">
#leftcol {
position: absolute; width: 200px; background: #800000; color:
white;
}
#leftcol div {
padding: 10px; /* Поля вокруг текста в левой колонке */
}
#rightcol {
position: relative; left: 200px; width: 550px; background:
#e0e0e0;
}
#rightcol div {
padding: 10px; /* Поля вокруг текста в правой колонке */
}
</style>
</head>
<body>
<div id="leftcol">
<div>Левая колонка</div>
</div>
<div id="rightcol">
<div>Правая колонка</div>
</div>
</body>
</html>
Резюме
Позиционирование слоев предполагает использование стилевого параметра position, который задает, относительно каких координат ведется положение слоя. Для аргумента absolute за основу берется родительский элемент или окно браузера, относительно границ которого и указывается, где должен располагаться слой на веб-странице. Аргумент relative задает смещение слоя относительно его исходного расположения.
Сочетая для двух слоев значения параметра position и устанавливая слоям новое положение, можно формировать макет веб-страницы, состоящий из двух и более колонок. Причем можно управлять процессом наложения слоев друг на друга, получая таким образом интересные дизайнерские эффекты
| Статья опубликована: 05.04.2006 | Последнее обновление: 01.05.2008 |
Прежде, чем писать комментарий к статье, примите во внимание следующие моменты.
- Не задавайте вопросы в комментариях, для этой цели предназначен форум, где вы получите нужную помощь.
- Удаляются любые комментарии, которые:
- включают множество ошибок;
- написаны безграмотно;
- не имеют отношения к данной статье;
- не содержат никакой полезной информации для посетителей.
- Для выделения отдельных слов используйте следующие команды: [b]жирный[/b], [i]курсив[/i], [color=цвет]цветной текст[/color], [tag]тег[/tag], [var]параметр[/var], [code]пример[/code].
- Потренироваться в написании комментариев вы можете в песочнице.
Комментарии к статье
FireCat
28.05.2006
Ошибка. Основа - не окно. Я понимаю, что это - для начинающих, но именно начинающие и используют вложенные div-ы.
Цитата из "Спецификации CSS2":
"В модели абсолютного позиционирования величина смещения блока относительно его контейнера задается явно".
И ключевым моментом здесь является "его контейнер" - для начинающих нужно обязательно понять наследуемость стилей, в том числе и наследуемость позиционирования.
анонимоус
29.05.2006
V@dimK@
13.06.2007
вот код, у меня все норм, может че не так сделал :
<div style="width : 70px; position: absolute; background : red; padding : 5px;">
<select>
<option> Вася
<option> Коля
<option> Дима
</select>
</div>
<div style="position: relative; left : 70px; background : green">sdfvdfsv</div>
Попробуй, может это подойдет!
Step
22.06.2007
Спасибо, тебе. Пришло прозрение, что такое верстка слоями.
И почему они себя иногда так "непредсказуемо" ведут
А автору сайта - поклон и долгих лет жизни
Просто Андрей
29.06.2007
цитата "В случае использования относительного позиционирования, координаты отсчитываются от исходного положения слоя"
Вопрос - что считается исходным положением слоя?
В частности, в вашем примере с двумя колонками что является исходным положением для слоя rightcol?
Разве не положение ПОД слоем leftcol?
Для меня до сих пор удивительно, почему в примере 1 для слоя rightcol достаточно определить left: 200px; но не нужно top: <отрицательная высота слоя leftcol>
И второй вопрос: данный пример 2-колонной верстки должен работать лишь с двумя DIV или с любыми тегами, к которым применимы блочные свойства?
Спасибо
Влад Мержевич
24.07.2007
Использование <DIV> не принципиально, можно применять и другие блочные теги, например <P>.
Andrey
29.07.2007
#apDiv1 {
position:absolute;
left:20%;
top:80%;
width:217px;
height:102px;
}
При разрешении экрана 1280*1024 вс? ок, а при 1024*768 съезжает. Как быть, чтоб размещение слоя не зависело от разрешения экрана ?
Влад Мержевич
31.07.2007
Алексей
03.08.2007
Влад Мержевич
07.08.2007
PinkFloyd
05.09.2007
Господа, сможете подсказать по такому вопросу: как сделать так, чтобы высота слоя-родителя, в котором располагаются несколько абсолютно позиционированных слоев-потомков, вычислялась автоматически, в зависимости от позиции и высоты вложенных слоев? И можно ли это сделать вообще?
Овер
01.10.2007
Сам недавно мудохался над этим вопросом. Дело в том, что высота абсолютно позиционирумых слоев для слоя-родителя не учитывается, т.е. они просто удаляются из нормального потока, как пишут здесь:
http://loc.stack.ru/projects/CSS2/visuren.html#floats
Вариант, предложенный Владом Мержевичем тоже не плох, но не идеален, т.к. если высота правой колонки в его примере будет больше высоты левой, то она просто вылезет за пределы родителя. Но и выставить position:relative для обеих колонок тоже нельзя, т.к. нормальный поток, итить его туды, расположит их друг под другом. Казалось бы логично применить к этой конструкции float'ы, однако, насколько я понял, это свойство блокирует position (отсюда и две методики позиционирования: либо float, либо position) и высота колонок для слоя-родителя, опять-же, будет игнорироваться.
Поэтому, сейчас сам нахожусь в поисках гибкой модели, т.е. решаю вопрос:
как сделать так чтобы высота слоя-родителя автоматически подстраивалась под высоту каждого из столбцов-детей(неважно каким из способов позиционирования)?
loly
10.06.2008
В IE ровно на сколько сдвинули, на столько окно браузера справа срезает. Если окно уменьшить полоса прокрутки не появиться пока не дойдет до зарезервированной области и прокрутить правее этой области не получится. В Фаерфохе отображается но без отступа body который есть слева и сверху.
loly
10.06.2008