06. Позиционирование и z-индекс

На этой странице:

• Позиционирование
• Иерархия кода страницы
• Абсолютное позиционирование
• Относительное позиционирование
• Смешанное позиционирование
• Z-индекс
• Дизайн на позиционированных блоках
• Плавающие блоки
• Дизайн на плавающих блоках

Позиционирование

Позиционирование — это управление координатами размещения элемента в окне браузера. CSS предлагает для позиционирования свойство position. Значения этого свойства:

• absolute (абсолютное позиционирование);
• fixed (абсолютное фиксированное позиционирование);
• relative (относительное позиционирование);
• static (статическое позиционирование).

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

Значение fixed как и absolute задаёт элементу на экране абсолютные координаты, но отключает перемещение элемента при прокрутке окна. На базе значение fixed можно построить, например, навигационное меню, которое оставалось бы всегда под рукой пользователя, но это свойство, к сожалению, не поддерживает самый популярный на момент написания этих строк браузер Microsoft Internet Explorer 6 (браузеры Opera 6 и Firefox 2 поддерживают).

Алгоритмы работы значений absolute и relative будут подробно рассмотрены ниже, но сначала одно важное напоминание об иерархической структуре HTML-кода.

Иерархия кода страницы

Иерархия — это структура, в которой содержимое “упаковано по пакетикам”, вложенным друг в друга наподобие матрёшек.

Все элементы страницы расположены внутри элемента BODY, который является родителем всех других элементов страницы. Пусть, например, страница имеет следующий код:

Элемент BODY имеет здесь два прямых потомка e01 и e02. В свою очередь, эти элементы тоже имеют по два потомка e011, e012 и e021, e022 соответственно. Эту иерархическую схему можно изобразить так:

Позиционирование элементов выполняется с учётом иерархии кода. Вот почему так важно отчетливо представлять HTML-структуру документа. Опытные программисты всегда записывают код лесенкой (как в приведенном примере), и у них возникает гораздо меньше проблем при программировании, тестировании и отладке своих страниц.

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

Абсолютное позиционирование задается стилевым указанием position:absolute. При этом начало координат находится в верхнем левом углу прямого предка, при условии, что он также позиционирован (абсолютно или относительно). Если родитель не позиционирован, то берётся его родитель. Если все предки не имеют указаний position, то в качестве точки отсчёта принимается левый верхний угол экранного образа элемента BODY, то есть левый верхний угол документа (заметьте, не окна, а документа).

Горизонтальная и вертикальная координата задаются свойствами left и top соответственно.

Ниже показан пример, в котором картинка позиционируется в точку (100,50). Началом координат браузер считает начало документа.

В следующем примере абсолютно позиционированы две картинки. Для каждой из них указаны координаты (100,50), но для одной началом координат является начало документа, а для другой — начало блока DIV, внутри которого картинка находится (и который сам абсолютно позиционирован).

Приведенные выше примеры наглядно показывают, что абсолютно позиционированные элементы выпадают из процесса обычного последовательного форматирования. Браузер не берёт в расчёт порядок следования элементов в коде, а учитывает только вложенность для определения начала координат. Элементы выводятся в указанном месте, перекрывая при этом другие элементы страницы.

Порядок следования кодов абсолютно позиционируемых элементов становится важным, если они начинают перекрывать друг друга: “выше” оказывается тот элемент, код которого идет позже.

Наряду с координатами left (левая граница элемента) и top (верхняя граница элемента) можно использовать координаты right (правая граница элемента) и bottom (нижняя граница элемента).

В следующем примере картинки абсолютно позиционированы по углам документа.

Относительное позиционирование

Относительное позиционирование задается стилевым указанием position:relative. За начало координат принимается та точка, куда элемент был бы размещён без позиционирования.

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

В приведенном ниже примере документ форматируется обычным образом.

В следующем примере на картинку наложено относительное позиционирование.

Абсолютно позиционированный блок браузер форматирует под размер своего окна (код примера можно посмотреть через меню Вид/Просмотр HTML-кода):

Относительно позиционированный блок обрезается окном, полоса прокрутки не появляется:

Исключить обрезание окном можно, задав компенсирующий отступ справа при помощи свойства margin-right:

Смешанное позиционирование

Относительное в абсолютном

Абсолютное в относительном

Абсолютное в абсолютном

В примере код абсолютно позиционированной картинки расположен внутри абсолютно позиционированного блока. Картинка не меняет своего положения на экране при изменении размера окна, так как координаты блока остаются неизменными.

Относительное в относительном

В примере код относительно позиционированной картинки расположен внутри относительно позиционированного блока. Когда положение блока меняется на экране из-за изменения размеров окна, меняется и положение картинки: ведь смещается начало координат, ниже которого на 60 пикселов должна располагаться картинка.

Замечание. Браузер Microsoft Internet Explorer версии 6 не всегда корректно отображает блок при такой комбинации позиционирования (зависит от размера окна). Браузеры Opera 9 и Firefox 2 отображают блок правильно.

Приведенные выше примеры показывают, что элемент позиционируется вместе со своими потомками, независимо от того, как позиционируются последние (или не позиционируются вовсе).

Z-индекс

Стилевое свойство z-index позволяет отойти от плоского представления документа на экране. Его значением является целое число, номер плоскости, в которой будет размещаться элемент (вместе со своими потомками).

Свойство z-index используется только для относительно или абсолютно позиционированных элементов.

Основной текст имеет нулевой уровень (z-index:0). Положительный z-индекс размещает элементы над основным текстом, отрицательный — под ним. Из двух плоскостей размещения та расположена выше, у которой z-индекс больше.

Не все браузеры понимают отрицательные значения z-index. Поэтому лучше использовать только положительные значения этого свойства.

Если у элементов один уровень (задан явно или не задан вовсе), то тот из них будет располагаться выше, чей HTML-код идёт позже.

Дизайн на позиционированных блоках

Абсолютное позиционирование можно использовать при проектировании дизайна гипертекстовой страницы. Рассмотрим несколько типичных примеров.

Жёсткий дизайн

Страница состоит из четырёх абсолютно позиционированных областей фиксированной ширины:

1. Заголовок и логотип (фиксирована и высота)
2. Меню
3. Основное содержимое
4. Новости

Размеры выбраны с учетом размещения без горизонтальной прокрутки в окне шириной в 640 пикселов.

Файл 10p33.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  width: 610px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  width: 320px;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  position: absolute; 
  left:420px;
  top:60px;
  width: 190px;
  background: #E5E5E5;  
}

Файл 10p33.htm

Резиновый дизайн

В предыдущем примере ширина всех блоков на страницы была фиксирована. Вот почему, такой макет был назван “жёстким”.

Жёсткий макет не слишком удобен — в широких окнах вся композиция будет прижиматься к левому краю, оставляя пустое пространство справа.

Рассмотрим пример “резинового” дизайна, при котором содержимое будет стремиться занять всю ширину окна.

Макет состоит из трёх абсолютно позиционированных областей:

1. Заголовок и логотип (фиксирована высота)
2. Меню
3. Основное содержимое

Ширина области с основным содержимым не указывается, и эта область будет растягиваться до правой границы окна браузера.

Файл 10p34.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  background: #FFF2A6;  
}

Файл 10p34.htm

Плавающие блоки

Плавающий блок — это блок, с заданным свойством float.

Если задано значение left, блок прижимается к левой границе родительского элемента, остальные элементы обтекают блок справа.

Если задано значение right, блок прижимается к правой границе родительского элемента, остальные элементы обтекают блок слева.

Чтобы прекратить обтекание, нужно после плавающего блока поместить элемент со свойством clear. У этого свойства имеются следующие значения:

• left — прекращает обтекание float:left;
• right — прекращает обтекание float:right;
• both — прекращает любое обтекание.

Дизайн на плавающих блоках

Разработчики активно используют плавающие блоки при проектировании дизайна своих страниц. Рассмотрим несколько примеров.

Пример 1

Добавим в рассмотренный ранее макет резинового дизайна плавающий блок для отображения колонки новостей:

Файл 10p35.css

  
/* 1. Заголовок и логотип  */
.title
{
  position: absolute; 
  left:0px;
  top:0px;
  height: 60px;
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  position: absolute; 
  left:0px;
  top:60px;
  width: 100px;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  position: absolute; 
  left:100px;
  top:60px;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  float:right;
  width: 190px;
  background: #E5E5E5;  
}

Файл 10p35.htm

Пример 2

Построим макет страницы на 5 блоках. Блоки не будут позиционироваться, но блоки 2, 3, 4 будут плавающие с “прилипанием” слева и с заданием ширины соответственно в 16, 52, 31 процент от ширины окна документа (родительского элемента):

Файл 10p36.css

  
/* 1. Заголовок и логотип  */
.title
{
  background: #06DFE1;  
}
/* 2. Меню                 */
.menu
{
  float:left;
  width: 16%;
  background: #FFE3CC;  
}
/* 3. Основное содержимое  */
.contents
{
  float:left;
  width: 52%;
  background: #FFF2A6;  
}
/* 4. Новости              */
.news
{
  float:left;
  width: 31%;
  background: #E5E5E5;  
}
/* 5. Автор               */
.author
{
  clear:left;
  background: #00FFBF;  
}

Файл 10p36.htm