2.6 Позиционирование блоков. Слои
При отображении документа элементы HTML выводятся последовательно друг за другом по мере их следования в тексте документа. Детальное расположение элементов определяется самим браузером. Однако в CSS существуют и специализированные средства, позволяющие располагать элементы в произвольном месте страницы. До появления спецификации CSS-P, которая вошла в спецификацию CSS2, ничего подобного делать на HTML-страницах было нельзя. До появления CSS-P единственным средством относительно точного позиционирования были таблицы. Они позволяли точно расположить компоненты HTML-страницы относительно друг друга на плоскости. CSS-P позволяет точно разместить элемент разметки не только относительно других компонентов страницы, но и относительно границ страницы. Кроме того, CSS-P добавляет странице еще одно измерение — элементы разметки могут "наезжать" друг на друга. При этом можно менять порядок "наезда" — перекладывать слои.
2.6.1 Координаты и размеры
Стандарт CSS-P позволяет с точностью до пиксела разместить блочный элемент разметки в рабочем поле окна браузера. CSS-P определяет две системы координат: относительную и абсолютную. Это позволяет обеспечить гибкость размещения элементов как относительно границ рабочего поля окна браузера, так и относительно друг друга.
Абсолютные координаты. При использовании абсолютных координат точка отсчета помещается в верхний левый угол окна браузера, а оси X и Y направлены вправо по горизонтали и вниз по вертикали, соответственно. Если в этой системе координат некоторый блочный элемент должен быть размещен на 10 px ниже верхнего обреза рабочей области браузера и на 20 px правее правого края рабочей области браузера, то его описание будет выглядеть, как показано в примере 2.7.
В данной записи тип системы координат задан атрибутом position (значение - absolute), координата X задана атрибутом left (значение - 20 px), координата Y - атрибутом top (значение - 10 px). Атрибуты top и left определяют координаты верхнего левого угла блока в абсолютной системе координат (рис.2.7).
|
Пример 2.7. Абсолютное позиционирование блока |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HЕАD> <TITLE>Абсолютное позиционирование</TITLE> </HEAD> <BODY> <DIV style="BORDER: navy 2px solid; PАDDING: 10px; PОSITION:absоlute; TOP:10px; LЕFT:20px;"> Этот раздел позиционирован в абсолютной системе координат. Его верхний левый край расположен в точке (20px;10px). </DIV> </BОDY> </HTML>
|
Значения координат могут быть и отрицательными. Для того, чтобы убрать из отображаемой области блок с линейными размерами 100 px (высота) на 200 px (ширина), достаточно позиционировать его следующим образом:
.example { position:absolute; top:-100px;left:-200px; width:200px;height:100px; }
В примере 2.8 приведен код, который динамически изменяет положение блока с помощью JavaScript-сценария так, чтобы он переместился вверх за пределы окна браузера. Подробно JavaScript-сценарии будут рассматриваться в следующей лабораторной работе. Результат приведен на рис.2.8.
|
Пример 2.8. Изменение абсолютного позиционирования блока |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HЕАD> <TITLE>Абсолютное позиционирование</TITLE> <SCRIPT> functiоn up(){if(window.document.all.kuku.style.pixelTop>-100) {window.document.all.kuku.style.pixelTop-=30; setTimeout("up();",500);}} </SCRIРТ> </HEAD> <BODY> <DIV id=kuku style="BОRDER:navy 2px solid; PADDING:10px; POSITION:absolute; LEFT:20px; TOP:10px; WIDTH:200px; HEIGHT:100px;"> <P>Этот раздел позиционирован в абсолютной системе координат. </DIV> <P style="MARGIN-TOP:120px; MARGIN-LEFT:40px;"> <BR>[<А href="javascript:up();void(0);">Поднять блок</A>] <BR>[<A href="javascript:window.document.all.kuku.style.pixelTop=10;void(0);"> Вернуть блок</A>] </BODY> </HТML>
|
Абсолютное позиционирование применяется тогда, когда либо все содержание страницы должно быть доступно без скроллинга ("прокрутки"), либо когда элементы разметки находятся в начале страницы и их взаимное расположение важно с точки зрения дизайна, например, для использования всплывающих меню.
Относительные координаты. Данная система координат позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества такой системы координат очевидны: она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках по умолчанию. В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y — вертикально вниз.
Чтобы задать координаты блока, в этой системе применяют запись, приведенную в примере 2.9, результат показан на рис.2.9.
|
Пример 2.9. Относительное позиционирование блока |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Относительное позиционирование</TITLE> </HЕАD> <BODY> <DIV style="BORDER: 1px solid; WIDTH:100%; COLOR:black; HEIGHT:100px;"> <DIV stylе="BORDER: 1px solid; WIDTH:300px; COLOR:black; POSITION:relative; LЕFT:0px; TOP:0px;"> Этот блок находится в точке отсчета относительных координат </DIV> <DIV style="BORDER:1px solid; WIDTH:300px; CОLOR:black; РОSITION:rеlative; LEFT:50px; TOP:0px;"> А этот блок смещен вправо на 50px </DIV> </DIV> </BODY> </HTML>
|
Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что Netscape Navigator вообще непредсказуем в работе с относительными координатами, поэтому в нем следует их избегать.
В относительной системе координат можно пользоваться отрицательными смещениями, как это показано в примере 2.10 и на рис.2.10. В данном примере слой, первоначально сдвинутый на 50 пикселов вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселов влево, получая отрицательную величину смещения по оси X (left:-50 px). После повторного нажатия на ссылку положение блока восстанавливается. Перемещение блока реализуется с помощью JavaScript-сценария. Подробно JavaScript-сценарии будут рассматриваться в следующей лабораторной работе.
|
Пример 2.10. Изменение относительного позиционирования блока |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Относительное позиционирование</TITLE> <SCRIPT>flag=0;</SCRIPT> </HEAD> <BODY> <DIV id=kuku style="BORDER:1px solid; WIDTH:200px; PОSITION:relаtive; TOP:0px; LЕFT:50px;"> <А href="javascript: if(flag==0) {window.document.all.kuku.style.pixelLeft=-50; flag=1;} else {window.document.all.kuku.style.pixelLeft=50;flag=0;}; void(0);"> Сдвинуть слой </A> </DIV> </BODY> </HTML>
|
