Координати і розміри
Стандарт CSS-P дозволяє з точністю до пікселя розмістити блоковий елемент розмітки в робочому полі вікна браузера. При такому підході виникає природне запитання: як влаштована систем координат, у якій автор сторінки робить розміщення її компонент.
CSS-P визначає дві системи координат: відносну й абсолютну. Це дозволяє забезпечити гнучкість розміщення елементів як щодо границь робочого поля вікна браузера, так і відносно один одного.
Блоки - це не абстрактні точки, що не займають на площині сторінки місця. Блоки представляють собою прямокутники, що "замітають" площу. Текст і інші компоненти сторінки під блоком стають недоступні користувачеві, тому лінійні розміри блоку мають для створення HTML-сторінок не менше значення, ніж його координати.
Абсолютні координати
При використанні "абсолютних" координат точка відліку міститься у верхньому лівому куті вікна браузера, а осі X і Y спрямовані вправо по горизонталі і вниз по вертикалі, відповідно.
Якщо в цій системі координат деякий блоковий елемент повинен бути розміщений на 10 px нижче верхнього краю робочої області браузера і на 20 px правіше лівого краю робочої області браузера, то його опис буде виглядати наступним чином:
.example { position:absolute;top:10px;left:20px; }
У даному записі тип системи координат заданий атрибутом position (значення - absolute), координата X задана атрибутом left (значення - 20 px), координата Y - атрибутом top (значення - 10 px).
Атрибути top і left визначають координати верхнього лівого кута блоку в абсолютній системі координат.
Значення координат можуть бути і від’ємними. Для того, щоб забрати з відображуваної області блок з лінійними розмірами 100 px (висота) на 200 px (ширина), досить позиціонувати його в такий спосіб:
.example{position:absolute;top:-100px;left:-200px;width:200px;height:100px;}
Абсолютне позиціонування застосовується тоді, коли або весь зміст сторінки повинен бути доступним без скролінга ("прокручування"), або коли елементи розмітки знаходяться на початку сторінки і їхнє взаємне розташування важливе з погляду дизайну, наприклад, для використання випливаючих меню.
Відносні координати
Дана координатна система дозволяє розмістити блоки на сторінці в координатах їх охоплюючого блоку. Переваги такої системи координат очевидні: вона дозволяє зберігати взаємне розташування елементів розмітки при будь-якому розмірі вікна браузера і його налаштувань по замовчуванні.
Як початок відліку в цій системі координат обрана точка розміщення поточного блоку по замовчуванні. Вісь 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>
Для роботи з відносною системою координат краще користуватися універсальними блоками DIV. Це пов'язано з тим, що в Netscape Navigator, наприклад, параграф не може містити параграфів. Довільний блок негайно закриває параграф, отже, вкласти в нього що-небудь не можна.
Слід зазначити, що в 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>
У даному прикладі шар, спочатку зміений на 50 пікселів вправо, після натискання на гіпертекстове посилання зміщається на 100 пікселів вліво, одержуючи від’ємну величину зсуву по осі X (left:-50 px). Після повторного натискання на посилання положення блоку відновлюється.