Относительные координаты
Данная координатная система позволяет разместить блоки на странице в координатах охватывающего их блока. Преимущества и необходимость наличия такой координатной системы очевидны. Она позволяет сохранять взаимное расположение элементов разметки при любом размере окна браузера и его настройках умолчания.
В качестве точки отсчета в этой системе координат выбрана точка размещения текущего блока по умолчанию. Ось 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). После повторного нажатия на ссылку положение блока восстанавливается.
