Учебник. Каскадные таблицы стилей

       

Относительные координаты


Данная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества и необходимость наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания.

В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось X при этом направлена горизонтально вправо, а ось Y - вертикально вниз.

Для задания координат блока в этой системе применяют запись типа:

<div style="border-width:1px;border-style:solid;
width:100%;height:100px;">

<div style="position:relative;top:0px;left:0px;
border-width:1px;">

Этот блок находится в точке отсчета относительных координат

</div>

<div style="position:relative;top:0px;left:50px;
border-width:1px;">

А этот блок смещен вправо на 50px

</div>

</div>

Этот блок находится в точке отсчета относительных координат

А этот блок смещен вправо на 50px

Для работы с относительной системой координат лучше пользоваться универсальными блоками DIV. Это связано с тем, что в NN, например, параграф не может содержать параграфов. Любой блок немедленно закрывает параграф, следовательно, вложить в него что-либо нельзя.

Следует отметить, что NN вообще непредсказуем в работе с относительными координатами, поэтому в нем их следует избегать.

В относительной системе координат можно пользоваться отрицательными смещениями:

<div
style="position:relative;
top:0;
left:50;
border-width:1px;
border-style:solid;
width:200px;">

<a class=doc
href="javascript:
if(flag==0)
{window.document.layers[2].left=-50;flag=1;}
else
{window.document.layers[2].left=50;flag=0;};
void(0);">
Сдвинуть слой
</a>

</div>

В данном примере слой, первоначально сдвинутый на 50 пикселей вправо, после нажатия на гипертекстовую ссылку смещается на 100 пикселей влево, получая отрицательную величину смещения по оси X (left:-50px). После повторного нажатия на ссылку положение блока восстанавливается.



Содержание раздела