| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 + | 8.0 + | 1.0 + | 4.0 + | 1.0 + | 1.0 + | 1.0 + | 1.0 + |
Коротка інформація
| Значення за умовчанням | static |
|---|---|
| Успадковується | Ні |
| застосовується ся | До всіх елементів |
| Посилання на специфікацію | http://www.w3.org/TR/CSS21/visuren.html#propdef-position |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Встановлює спосіб позиціонування елемента щодо вікна браузера або інших об'єктів на веб-сторінці.
Синтаксис
position: absolute | fixed | relative | static | inherit
Значення
- absolute
- Вказує, що елемент абсолютно позиціонується, при цьому інші елементи відображаються на веб-сторінці немов абсолютно позиціонованого елемента і немає. Положення елемента задається властивостями left, top, right і bottom, також на положення впливає значення властивості position батьківського елемента. Так, якщо у батька значення position встановлено як static або батька немає, то відлік координат ведеться від краю вікна браузера. Якщо у батька значення position задано як fixed, relative або absolute, то відлік координат ведеться від краю батьківського елементу.
- fixed
- За своєю дією це значення близьке до absolute, але на відміну від нього прив'язується до зазначеної властивостями left, top, right і bottom точці на екрані і не змінює свого положення при прокручуванні веб-сторінки. Браузер Firefox взагалі не відображає смуги прокрутки, якщо положення елемента задано фіксованим, і воно не поміщається цілком у вікно браузера. У браузері Opera хоча і показуються смуги прокрутки, але вони ніяк не впливають на позицію елемента.
- relative
- Положення елемента встановлюється щодо його вихідного місця. Додавання властивостей left, top, right і bottom змінює позицію елемента і зрушує його в ту чи іншу сторону від первісного розташування.
- static
- Елементи відображаються як зазвичай. Використання властивостей left, top, right і bottom не призводить до якихось результатів.
- inherit
- Успадковує значення батька.
Приклад
HTML5 CSS2.1 IE Cr Op Sa Fx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
position </title>
<style>
.layer1 {position: relative; /* Відносне позиціонування */ background: #f0f0f0; /* Колір фону */ height: 200px; /* Висота блоку */ } .layer2 {position: absolute; /* Абсолютне позиціонування */ bottom: 15px; /* Положення від нижнього краю */ right: 15px; /* Положення від правого краю */ line-height: 1px; } </style>
</head>
<body>
<div class="layer1">
<div class="layer2">
<img src="images/girl.jpg" alt="Дівчинка"/>
</div>
</div>
</body>
</html>
Результат даного прикладу показаний на рис. 1.
Об'єктна модель
[window.] Document.getElementById (" elementID "). Style. position
Браузери
Браузер Internet Explorer 6 значення fixed не підтримує. Internet Explorer до версії 8.0 не підтримує значення inherit .