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

• Тип элемента - блочный или линейный (display: block или inline).
• Размер элемента - высота (width) и ширина (height).
• Свойство overflow - "поведение" элемента в ситуации, когда его содержимое не умещается в заданные границы.
• Поля и отступы элемента - margin и padding (в некоторых браузерах размеры элемента height и height и отступы padding складываются и образуют итоговую высоту элемента. В связи с этим, при размещении элементов в браузерах Netscape, Mozilla и прочих подобных, следует учитывать значение padding).
• Свойство float - создание "плавающего" элемента

Если вы правильно учтете влияние всех вышеперечисленных факторов на размер и положение элемента, вы никогда не будете озадаченны ситуацией на странице (а они бывают разные...). Из всех свойств, перечисленных выше, незнакомым для вас является, пожалй, только свойство float. Мы его рассмотрим подробно в следующем разделе. А сейчас ...

Позиционирование элементов "вручную"

То, каким образом вычисляются координаты элементов (браузером или "вручную"), указывает свойство position. Ему обычно присваивают значения

• absolute - абсолютное позиционирование
• relative - относительное позиционирование

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

При абсолютном позиционировании элемент размещается относительно левого верхнего угла окна документа с помощью параметров left и top, определяющих положение левого верхнего угла элемента:

Рис. №11.1.1. Абсолютное позиционирование. Ситуация 1

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

Рис. №11.1.2. Абсолютное позиционирование. Ситуация 2

Последние версии браузеров стали поддерживать еще один способ размещения элементов на веб-странице — через свойства bottom и right, определяющих положение правого нижнего угла элемента относительно правого нижнего угла родителя:

Рис. №11.1.2. Абсолютное позиционирование. Ситуация 2

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

Обратите внимание, что при указании только одного свойства position: absolute;, элемент будет перемещен в начало координат (Координаты 0х0).

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

При относительном позиционировании точкой начала отсчета координат элемента является его стандартная позиция, вычисленная браузером автоматически. Координаты элемента left и top определяют смещение элемента, относительно стандартного положения (их значения могут быть как положительными, так и отрицательными). При указании одного только свойства position: relative;, элемент не переместится, так как изначально находится в начале координат.

Рис. №11.1.3. Относительное позиционирование

Рисунок 11.1.3 иллюстрирует относительное позиционирование элемента, дочернего по отношению к, например, абзацу. Координатами начала отсчета в таком случае является та позичия, в которую элемент помещен браузером автоматически. Свойства left и top, повторяю, задают смещение элемента относительно этой позиции и могут принимать как положительное, так и отрицательное значение.

Пример: текст с тенью

Следующий пример прекрасно подходит для оформления текстовых элементов, содержащих текст крупного размера, например - заголовок 1го уровня h1. Для создания тени в заголовке создадим еще 2 дочерних элемента span, содержащих одинаковый текст. Оба элемента должны иметь абсолютное позиционирование - это даст нам возможность управлять их взаимным расположением, причем не только в плоскости экрана.

Для того, чтобы координаты дочерних элементов отсчитывались не от верхнего левого угла страницы, а относительно заголовка, в котором они располагаются, этот заголовок должен иметь относительное (или абсолютное позиционирование). Мы воспользуемся относительным позиционированием, так как в этом случае нет необходимости указывать точные координаты элемента.

Итак... Вот код таблицы стилей:

h1.DropShadow {
 position: relative;
 color: red;
 font-family: Impact, sans-serif;
} 
h1.DropShadow span.text {
 position: absolute;
}
h1.DropShadow span.shadow {
 position: absolute;
 left: 5;
 top: 5;
 color: #666666; 
}

...
<h1 class="DropShadow">
 <span class="shadow">Заголовок с тенью</span>
 <span class="text">Заголовок с тенью</span>
</h1>
...

В результате получим довольно приличный эффект тени. Однако, тень получается жесткой, размытие, придающее теням большую реалистичность, отсутствует напрочь.К сожалению... Обратите внимание на порядок записи элементов в коде примера. Элемент класса "shadow" следует перед элементом класса "text". Это и является причиной того, что тень располагается как бы "под" текстом, частично перекрываясь.

Пример: объемный текст

Примерно таким же образом, как и тень, можно создать эффект объемного (выпуклого или вдавленного) текста. Для реализации эффекта объема необходимы уже 3 дочерних элемента - сам текст, его подсвеченная копия (сверху и левее) и его затененная копия (нижеи правее). Главное не запутаться в порядке записи элементов! И еще: рельеф будет действительно эффектно выглыдеть, если цвет фона страницы будет совпадать с цветом текста элемента (в нашем случае - h1).

Вот код:

body {
 background-color: #dddddd;
} 
h1.EmbossUp {
 position: relative;
 color: #dddddd;
 font-family: Arial Black, sans-serif; 
} 
h1.EmbossUp span.text {
 position: absolute;
}
h1.EmbossUp span.shadow {
 position: absolute;
 left: 1;
 top: 1;
 color: #333333; 
}
h1.EmbossUp span.highlight {
 position: absolute;
 left: -1;
 top: -1;
 color: #ffffff; 
}

...
<h1 class="EmbossUp">
 <span class="shadow">Заголовок с рельефом</span>
 <span class="highlight">Заголовок с рельефом</span>
 <span class="text">Заголовок с рельефом</span>
</h1>
...

Как говорится - "дешево и сердито". Думаю, что совместить оба примера и получить объемный текст, отбрасывающий тень, вам не составит особого труда.

z-index

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

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

h1.EmbossUp span.text {
 position: absolute;
 z-index: 999;
}