Розглянемо приклад, наведений у Лістингу 4 з ЛР №1. У цьому прикладі фрагменти вмісту розміщені в блочних елементах <div>, для яких перевизначені стилі властивостей, які визначають положення на сторінці. Якщо відключити ці стилі, то вигляд сторінки сильно зміниться (мал. 2).
Рис. 2. Вигляд сторінки з відключеними стилями
Такий вплив на зовнішній вигляд має властивість position. Це властивість в поєднанні з властивостями, top left, right, bottom, display, clear і ряду інших дозволяє керувати положенням елементів на сторінці і порядком їх виводу. Властивість position може приймати такі значення:
static — нормальне положення
Даний блок є звичайним блоком, він відображається за загальними правилами. Властивості 'left' і 'top' не застосовуються.
relative — відносне позиціонування
Положення блоку розраховується згідно з нормальним потоком виводу. Потім блок зміщується щодо свого нормального (static) положення.
absolute — абсолютне позиціонування
Положення блоку (можливо і розмір) вказується за допомогою властивостей 'left', 'right', 'top' і 'bottom'. Вони вказують величину зміщення щодо контейнера блоку. Абсолютно позиціоновані блоки вилучаються з нормального потоку. Це означає, що вони не впливають на розміщення наступних елементів того ж рівня.
fixed — фіксоване положення
Положення блоку розраховується згідно з моделлю абсолютного позиціонування, а потім він фіксується щодо області перегляду або сторінки. Два оголошення можуть бути відокремлені один від одного за допомогою правила @media, як це показано в прикладі:
@media screen { H1#first { position: fixed; } }
@media print { H1#first { position: static; } }
Керуючи позиціюванням, можна різним чином розміщувати блоки інформації на сторінці, аж до створення ефектів накладання, перетікання, градієнта і т.п.
