Слои и позиционирование
Не совсем слои, DlV-теги. Это старый спор, длящийся еще со времен противостояния Internet Explorer и Netscape Navigator. Компания Microsoft, у которой больше средств и влияния, очевидно, выиграла эту борьбу. Мало кто сегодня вообще помнит о существовании Netscape. Но старая терминология все еще часто встречается, несмотря на то что официальное название слоев сегодня — DIV (от англ. "division" — разделение).
DIV-теги размещают на веб-странице внутри элемента-контейнера BODY. Расположение DIV-тега определяется в виде прямоугольника с указанием ширины, высоты и расстояния от верхнего левого угла веб-страницы. Этот прямоугольник рассматривается как миниатюрная страница, содержащая те же элементы, что и обычная веб-страница.
На самом деле концепция слоев использовалась еще в тс далекие времена, когда диапроектор считался самым большим достижением техники. Старшее поколение, вероятно, помнит преподавателей, переставляющих диапозитивы один поверх другого в диапроекторе. В результате таких перестановок получалось, что на экране информация одного слайда накладывается поверх другого. Первый слайд получается нижним слоем, второй — отображается поверх первого и т.д.
Веб-страницы — это, по сути, те же слои, где информация одного слайда накладывается на другой, более низкого уровня, и так далее до бесконечности.
Многие веб-дизайнеры пользуются концепцией слоев для расположения одного содержимого поверх другого. Это полезно, например, для сайта с набором карт, где показана Европа до, во время и после наполеоновских сражений. А интерфейс такого сайта позволяет просматривать карты в произвольной последовательности. В картографии это называется наложением. Такая терминология довольно часто встречается в геоинформационной системе "Google планета Земля".
Абсолютное позиционирование осуществляется относительно левого верхнего угла веб-страницы. Оно не зависит от каких-либо ее внутренних элементов. Таким образом, абсолютное позиционирование тега <DIV> на 50 пикселей вправо и вниз от левого верхнего края страницы позволяет расположить элемент в два раза ближе к краю страницы даже при заданных полях 100 пикселей.
Для того чтобы задать абсолютное позиционирование <DIV>-Teгa, достаточно просто указать отступ от верхней и левой границ веб-страницы. Например, для абсолютного позиционирования прямоугольника размером 100x100 пикселей с отступом в 50 пикселей относительно левого верхнего края страницы можно использовать следующий программный код:
<BODY> <DIV
Style="position:absolute;top:50;left:50;width:100;
height:100 ">
</DIV> </B0DY>
Относительное позиционирование совсем несложно реализовать. Достаточно в HTML-коде лишь заменить ключевое слово absolute на relative. Относительное позиционирование осуществляется аналогично абсолютному, разница заключается только в начале отсчета для отступа. При относительном позиционировании отступ отсчитывастся от элемента-контейнера, а не от левого верхнего угла веб-страницы. Общеизвестно, что каждый элемент на веб-странице находится внутри какого-то другого элемента-контейнера. Так, например, элемент BODY содержится внутри элемента HTML и т.д. Поэтому при использовании относительного позиционирования нужно обращать внимание на соседние элементы. Разве что разработчику нравится получать неожиданные результаты форматирования веб-страниц.
Если один DIV-тег расположен внутри другого, расчет положения второго нужно провести относительно первого, а не относительно всей веб-страницы. Допустим, расстояние от одного DIV-тега до другого составляет 200 пикселей слева и 200 пикселей сверху. Тогда, если родительский DIV-тег расположен на расстоянии 100 пикселей слева и сверху от края вебстраницы, начало координат дочернего DIV-тега будет 300 пикселей слева и сверху от края веб-страницы (расстояние от левого верхнего края до родительского DIV-тега плюс расстояние между родительским и дочерним DIV-тегами).