Відносні координати

Дана координатна система дозволяє розмістити блоки на сторінці в координатах охоплює їхнього блоку. Переваги такої системи координат очевидні: вона дозволяє зберігати взаємне розташування елементів розмітки при будь-якому розмірі вікна браузера і його налаштуваннях за умовчанням.

В якості точки відліку в цій системі координат обрана точка розміщення поточного блоку за замовчуванням. Вісь 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>

Рис. 12.8. Відносні координати

Для роботи з відносною системою координат краще користуватися універсальними блоками DIV. Це пов'язано з тим, що в Netscape Navigator, наприклад, параграф не може містити параграфів. Будь-який блок негайно закриває параграф, отже, вкласти в нього що-небудь не можна.

У відносної системі координат можна користуватися негативними зміщеннями:

<DIV STYLE = "position: relative;

top: 0; left: 50; border-width: 1px;

border- style: solid; width: 200px; ">

<A 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>

Рис. 12.9. Відносні координати

Рис. 12.10. Відносні координати

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