Урок 4. Позиционирование, z-index

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

Позиционирование — это управление координатами размещения элемента в окне браузера. CSS предлагает для позиционирования свойство position. У этого свойства могут быть три значения absolute (абсолютное позиционирование), relative (относительное позиционирование) и static (статическое позиционирование). Значение static размещает элемент на странице так, как он располагался бы без всякого позиционирования, поэтому использование этого значения не дает ничего нового. Алгоритмы работы значений absolute и relative будут рассмотрены ниже, но сначала одно важное напоминание об иерархической структуре кода HTML.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В следующем примере на картинку наложено относительное позиционирование. Измените размер окна и убедитесь, что картинка перемещается по экрану вслед за точкой отсчета — началом абзаца, которому принадлежит тег IMG в коде документа. Начало абзаца меняет свое положение тогда, когда предшествующий заголовок записывается в одну или две экранные строки.

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

относительное в абсолютном В первом примере код относительно позиционированной картинки расположен внутри кода абсолютно позиционированной таблицы. Таблица смещена от начала документа вправо на 50 пикселов, и это положение остается фиксированным при изменении размеров окна. Картинка смещена вниз на 100 пикселов относительно ее “нормального” положения внутри таблицы. При этом в таблице текст расположен так, как будто картинка находится на своем обычном месте.

абсолютное в относительном Во втором примере код абсолютно позиционированной картинки расположен внутри кода относительно позиционированной таблицы. Таблица смещена относительно своего “нормального” положения вправо на 50 пикселов. Начало координат для картинки связано с левым верхним углом таблицы. Картинка смещается вниз относительно этого положения на 100 пикселов. При этом текст в таблице форматируется без учета тега IMG.

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

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

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

Z-индекс

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

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

Задания

Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была выше предыдущей.
Создайте страницу, в которой одна и та же картинка выводится несколько раз со смещением вниз и вправо так, чтобы каждая следующая копия была ниже предыдущей.
Стилевое свойство overflow используется для определения того, что случится, если наполнение элемента выйдет за пределы заданной области. Среди предписываемых стандартом значений нормально работает только scroll — содержимое прокручивается. Напишите страничку, которая демонстрирует работу свойства overflow.
Иван Мячиков решил задать для текстового блока на своей странице широкое левое поле. Он поместил блок внутрь конструкции
```
<DIV style="position:relative; left:100;">
  ...
</DIV>
```
Поле получилось, но текст перестал форматироваться по правой границе окна. Помогите Мячикову исправить положение.
Если у абсолютно позиционированного элемента опущена одна или две координаты, то:
- Если не задано свойство left, то левый край элемента будет располагаться справа за элементом-родителем.
- Если не задано свойство top, то верхний край элемента будет располагаться ниже элемента-родителя. При этом, если родитель позиционирован относительно, то элемент будет располагаться по вертикали там, где он располагался бы, если бы вообще не был позиционирован.
Используя описанные особенности, создайте страничку с левым полем, в котором бы располагался маркер, указывающий на ошибочное слово в строке. При этом, если из-за изменения размера окна ошибочное слово переместится в другую строку, маркер должен автоматически следовать за ним.
Если картинку поместить в абзац, то она ведет себя как символ, перемещаясь по экрану за своим местом (при изменении размера окна браузера). Посмотрите здесь.
Создайте страничку, в которой целый блок (с несколькими картинками, текстом, другими элементами) ведет себя подобным образом.
RU RU RU RU Используя позиционирование, создайте “объемную” надпись из обычного текста (без картинок). Эта надпись должна быть привязана к своему месту в абзаце, подобно обычному слову.