За замовчуванням всі елементи на сторінці розташовуються послідовно:
- блокові елементи розташовуються один під іншим,
- рядкові елементи розташовуються один за іншим.
В CSS є можливість управляти позиціонуванням елементів, завдяки якому Ви можете порушити встановлений порядок їх розташування і розміщувати елементи в потрібному Вам місці сторінки.
Позиціонування здійснюється за допомогою властивості position. Воно встановлює спосіб позиціонування і може бути застосовано до всіх елементів.
Розрізняють абсолютне і відносне позиціонування елементів.
абсолютне позиціонування
Значення absolute властивості position встановлює абсолютне позиціонування елемента.
При абсолютному позиціонуванні координати нового положення елемента задаються за допомогою властивостей top. right. bottom і left:
- щодо країв вікна браузера, якщо батьківського елемента немає або якщо для нього властивості position присвоєно значення static (значення за замовчуванням).
- щодо країв батьківського елемента, якщо для нього властивості position присвоєно значення absolute. fixed або relative.
Відмінною особливістю абсолютного позиціонування є звільнення елементом раніше займаного простору: звільнена область може бути зайнята іншим елементом.
При значенні fixed властивості position елемент також буде абсолютно позиційованим. Але при цьому елемент фіксується в точці з координатами, заданими властивостями top. right. bottom і left. він не прокручується разом з вмістом сторінки.
Пінгвін розташовується в лівій частині абзацу - так як він і повинен розташовуватися за замовчуванням.
Текст змістився на місце, раніше займане пінгвіном. А пінгвін зафіксований!
У наведеному прикладі для пінгвіна в другому абзаці встановлено значення fixed для властивості position і задані координати за допомогою ключових слів top і right.
Відлік координат ведеться від країв вікна браузера, так як у батьківського елементу (абзацу - тега
) Властивість position не вказано, отже, воно приймає значення за замовчуванням static.
Таким чином пінгвін розташований на відстані 300 пікселів від верхнього краю і 220 пікселів від правого краю вікна браузера. І він не прокручується разом з вмістом сторінки: Ви весь час його бачите в одному і тому ж фіксованому місці (див. Праворуч).
відносне позиціонування
Значення relative властивості position встановлює відносне позиціонування елемента.
При відносному позиціонуванні координати нового положення елемента також задаються за допомогою властивостей top. right. bottom і left.
Але відлік координат ведеться щодо початкового місця положення елемента. При цьому раніше займане простір він не звільняє, і це місце не можуть зайняти інші елементи.
Пінгвін розташовується в лівій частині абзацу - так як він і повинен розташовуватися за замовчуванням.
Текст не змістився на місце, раніше займане пінгвіном: воно ніби залишилося за ним!
У наведеному прикладі для пінгвіна в другому абзаці встановлено значення relative для властивості position і задані координати за допомогою ключових слів bottom. 10px і left. 100px.
Відлік координат ведеться щодо початкового місця положення пінгвіна.
Шари в CSS. координата Z
Умовно кожен елемент має дві координати (так як ми маємо справу з площиною) X і Y. які визначають його положення на сторінці.
В CSS є можливість задавати для елементів третю - просторову координату Z. тим самим імітуючи третій вимір і дозволяючи елементам накладатися один на одного.
Властивість z-index реалізує цю можливість: воно задає значення координати Z. визначаючи номер шару, на якому розташовується елемент, і тим самим встановлюючи порядок накладення елементів один на одного
Значенням властивості z-index може бути будь-яке ціле позитивне число або 0. Чим більше значення Z. тим вище шар розташовується по відношенню до верствам з меншим значенням координати.
Наприклад, шар з номером 3 буде ближче до користувача, ніж шари з номерами 2 і 1 або шар без заданої координати Z.
За замовчуванням властивості z-index присвоюється значення auto або 0. А на передньому плані розташовується той елемент, який у вихідному коді HTML описаний нижче, так само як і при рівних значеннях властивості z-index.
Властивість застосовується до позиційованим елементів, тобто до елементів для яких встановлено властивість position зі значенням absolute. fixed або relative.
Вітання!
Вітання!
Пояснення до прикладу. Червоний "Привіт" ближче до користувача, так як для нього встановлено більшу властивості z-index. рівне 2. У той час як для синього "Привета" z-index дорівнює 1.