position
Браузер |
Internet Explorer |
Netscape |
Opera |
Safari |
Mozilla |
Firefox |
Версия |
5.5 |
6.0 |
7.0 |
6.0 |
7.0 |
8.0 |
7.0 |
8.0 |
9.0 |
1.0 |
1.7 |
1.0 |
2.0 |
Поддерживается |
Част. |
Част. |
Да |
Да |
Да |
Да |
Да |
Да |
Да |
Да |
Да |
Да |
Да |
Част. — Поддерживается частично.
Краткая информация
CSS |
CSS2 |
Значение по умолчанию |
static |
Наследуется |
Да |
Применяется |
Ко всем элементам, за исключением генерируемых |
Аналог HTML |
Нет |
Ссылка на спецификацию |
http://www.w3.org/TR/CSS21/visuren.php#propdef-position |
Описание
Устанавливает способ позиционирования элемента относительно окна браузера
или других объектов на веб-странице.
Синтаксис
position: absolute | fixed | relative | static
Аргументы
- absolute
- Указывает, что элемент абсолютно позиционирован. В этом случае он не существует
в обычном потоке документа подобно другим элементам, которые отображаются
на веб-странице словно абсолютно позиционированного объекта и нет. Положение
элемента задается атрибутами left, top,
right и bottom относительно
края окна браузера.
- fixed
- По своим свойствам это значение аналогично аргументу absolute,
но в отличие от него привязывается к указанной параметрами left,
top, right и bottom
точке на экране и не меняет своего положения даже при пролистывании веб-страницы.
Браузеры Netscape, Mozilla и Firefox вообще не отображают полосы прокрутки,
если положение элемента задано фиксированным, и оно не помещается целиком
в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но
они никак не влияют на позицию элемента. Internet Explorer 6 и ниже не поддерживает
данный аргумент.
- relative
- Положение элемента устанавливается относительно его исходного места. Добавление
атрибутов left, top,
right и bottom изменяет
позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения,
в зависимости от применяемого параметра.
- static
- Элементы отображаются как обычно. Использование параметров left,
top, right и bottom
не приводит к каким-либо результатам.
Пример
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>position</title>
<body>
<div style="font-family: Times, serif; font-size: 200%">
T<span style="position: relative; top: 10px">E</span>X
и L<span style="position: relative; top: -5px; font-size: 80%">A</span>T<span
style="position: relative; top: 10px">E</span>X
</div>
</body>
</html>
Результат данного примера показан ни рис. 1.
Рис. 1. Применение параметра position
Объектная модель
[window.]document.getElementById("elementID").style.position
Примечание
Браузер Internet Explorer 7 поддерживает значение position: fixed только в «строгом» режиме (<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">).