Абсолютні координати

Координати і розміри

Стандарт CSS-P дозволяє з точністю до пікселя розмістити блоковий елемент розмітки в робочому полі вікна браузера. При такому підході виникає природне запитання: як влаштована система координат, у якій автор сторінки робить розміщення її компонентів.

CSS-P визначає дві системи координат: відносну та абсолютну. Це дозволяє забезпечити гнучкість розміщення елементів як щодо меж робочого поля вікна браузера, так і відносно один одного.

Блоки - це не абстрактні точки, які не займають на площині сторінки місця. Блоки є прямокутники, які "замітають" площа. Текст та інші компоненти сторінки під блоком стають недоступні користувачеві, тому лінійні розміри блоку мають для створення HTML-сторінок не менше значення, ніж його координати.

При використанні "абсолютних" координат точка відліку поміщається у верхній лівий кут батьківського блоку (наприклад, вікна браузера), а осі X і Y спрямовані вправо по горизонталі і вниз по вертикалі, відповідно:

Рис. 12.5. Абсолютні координати

Якщо в цій системі координат деякий блоковий елемент повинен бути розміщений на 10 px нижче верхнього обріза робочої області браузера і на 20 px правіше лівого краю робочої області браузера, то його опис буде виглядати наступним

чином:.Example {position: absolute; top: 10px;

left: 20px;}

У даній запису тип системи координат задано атрибутом position (значення - absolute), координата X задана атрибутом left (значення - 20 px), координата Y - атрибутом top (значення - 10 px).

Атрибути top і left визначають координати верхнього лівого кута блоку в абсолютній системі координат.

Рис. 12.6. Абсолютні координати

Значення координат можуть бути і негативними. Для того, щоб прибрати з видимої області блок з лінійними розмірами 100 px (висота) на 200 px (ширина), досить позиціонувати його таким

чином:.Example {position: absolute;

top:-100px; left:-200px;

width: 200px; height: 100px;}

Рис. 12.7. Абсолютні координати

Абсолютне позиціонування застосовується тоді, коли або весь вміст сторінки має бути доступне без скролінгу ("прокручування"), або коли елементи розмітки знаходяться на початку сторінки і їх взаємне розташування важливо з точки зору дизайну, наприклад, для використання спливаючих меню.

Дата добавления: 2014-01-15