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

Определение размеров

Абсолютно позиционированные элементы будут сжиматься, чтобы соответствовать своему контенту, если не определить их размеры. Ширину можно определить, задавая свойства left и right, или задавая свойство width. Высоту можно определить, задавая свойства top и bottom, или задавая свойство height.

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

Для любого абсолютно позиционированного элемента значения процентов для свойств left, right и width определяются относительно ширины объемлющего блока. Значения процентов для свойств top, bottom и height определяются относительно высоты объемлющего блока.

Internet Explorer 6 и более старые версии, а также Opera 8 и более старые версии, воспринимают это совершенно неправильно и используют вместо этого размеры блока предка. Давайте поэкспериментируем с другим примером, чтобы увидеть, что это может иметь большое значение.

Начнем с определения размеров элемента #inner, используя значения процентов - сделайте следующие изменения в правиле #inner:

#inner {
  width: 50%;
  height: 50%;
  background-color: #999;
  position: absolute;
  left: 1em;
}

Сохраните и перезагрузите и вы увидите, что серый прямоугольник станет шире и ниже (по крайней мере, если вы используете современный браузер). Объемлющий блок по-прежнему будет #outer, так как он имеет position:relative. Ширина элемента #inner составляет сейчас половину #outer, а его высота половину высоты #outer.

Давайте сделаем окно просмотра снова объемлющим блоком, чтобы увидеть разницу! Сделайте следующие изменения в #outer:

#outer {
  margin: 5em;
  border: 1px solid #f00;
  height: 4em;
  position: static;
}

Сохраните и перезагрузите документ - видите разницу? Серый бокс теперь имеет половину ширины и половину высоты окна браузера.

Как можно видеть, знание объемлющих блоков абсолютно важно!

Третье измерение - z-индекс

Естественно рассматривать Web-страницу двумерной. Технология пока не развилась в такой степени, чтобы 3D-дисплеи стали широко распространенными, поэтому мы должны удовлетворяться шириной и высотой и имитировать эффекты 3D. Но визуализация CSS на самом деле происходит в трех измерениях! Это не означает, что можно заставить элемент висеть перед экраном - увы - но можно сделать несколько других полезных вещей с позиционированием элементов.

Двумя основными осями на Web-странице являются горизонтальная ось X и вертикальная ось Y. Начало координатной системы находится в верхнем левом углу окна просмотра, т.е. в этом месте оба значения X и Y равны 0.

Но существует также ось Z, которую можно вообразить направленной перпендикулярно к поверхности монитора (или бумаги при печати). Большие значения Z указывают позицию "перед" меньшими значениями Z. Значения Z могут быть также отрицательными, что указывает на положение "позади" некоторой точки привязки (я сейчас объясню, что это за точка привязки).

Прежде чем продолжить, я должен предупредить, что это одна из самых сложных тем в CSS, поэтому не падайте духом, если вы что-то не поймете при первом чтении.

Позиционированные элементы (включая относительно позиционированные элементы), изображаются в так называемом контексте стека. Элементы в контексте стека имеют одну точку привязки на оси Z. Подробнее об этом ниже. Можно изменить позицию Z (называемую также уровнем стека) позиционированного элемента с помощью свойства z-index. Это значение может быть целым числом (которое может быть отрицательным) или одним из ключевых слов auto или inherit. Значением по умолчанию является auto, которое означает, что элемент имеет такой же уровень стека, как и его предок.

Необходимо отметить, что можно определить позицию индекса только на оси Z. Невозможно заставить элемент появиться на расстоянии 19 пикселей или 5 сантиметров перед другим. Представьте себе это как колоду карт: вы можете сложить карты стопкой (стеком) и решить, что туз крестей должен быть выше тройки бубей - каждая карта имеет свой уровень стека, или Z-индекс.

Если Z-индекс определяется как положительное целое число, то вы присваиваете ему уровень стека "перед" другими элементами в том же контексте стека, которые имеют меньший уровень стека. Z-индекс равный 0 (ноль) означает то же самое, что и auto, но имеется отличие, к которому я скоро вернусь. Отрицательное целое значение Z-индекса присваивает уровень стека "позади" уровня стека предка.

Когда два элемента в одном контексте стека имеют одинаковый уровень стека, тот, который появляется позже в исходном коде появится поверх предшествующего одноуровневого элемента.

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

1. Фон и границы элементов, которые формируют контекст стека
2. Позиционированные потомки с отрицательными уровнями стека
3. Потомки блочного уровня в нормальном потоке
4. Плавающие потомки
5. Потомки строкового уровня в нормальном потоке
6. Позиционированные потомки с уровнем стека, заданным как auto или 0 (ноль)
7. Позиционированные потомки с положительными уровнями стека

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

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

<body>
  <div id="outer">
    <div id="inner"></div>
    <div id="second"></div>
  </div>
</body>

2. Затем необходимо восстановить код CSS, так чтобы #outer был охватывающим блоком, и задать непроцентные размеры для #inner. Давайте сделаем также #outer немного выше, чтобы было больше пространства для эксперимента. Сделайте в правилах следующие выделенные изменения:

#outer {
  margin: 5em;
  border: 1px solid #f00;
  height: 8em;
  position: relative;
}

#inner {
  width: 5em;
  height: 5em;
  background-color: #999;
  position: absolute;
  left: 1em;
}

3. Добавьте также правило для элемента #second:

#second {
  width: 5em;
  height: 5em;
  background-color: #00f;
  position: absolute;
  top: 1em;
  left: 2em;
}

4. Сохраните и перезагрузите документ, и вы увидите ярко синий бокс перекрывающий серый бокс. Оба бокса имеют один уровень стека ( auto, начальное значение, которое означает уровень стека 0), но синий бокс изображается перед серым боксом, так как он появляется позже в исходном коде. Можно сделать так, чтобы первый бокс выводился сверху, задавая для него положительный уровень стека. Необходимо задать его просто больше 0 - нет никакой необходимости использовать такие значения как 10000. Добавьте следующую выделенную строку в правило #inner:

#inner {
  width: 5em;
  height: 5em;
  background-color: #999;
  position: absolute;
  left: 1em;
  z-index: 1;
}

5. Сохраните и перезагрузите, и теперь вы увидите, что серый бокс выводится сверху синего.