position

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

Описание

Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице. Свойство применимо ко всем элементам, создано в версии CSS2 и проходит валидацию согласно версии CSS3.

Синтаксис

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: Наследует значение родителя.

Пример

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>position</title>
 <style>
 .layer1 {
 position: relative; /* Относительное позиционирование */
 background: #FFCC33; /* Цвет фона */
 height: 200px; /* Высота блока */
 }
 .layer2 {
 position: absolute; /* Абсолютное позиционирование */
 bottom: 15px; /* Положение от нижнего края */
 right: 15px; /* Положение от правого края */
 line-height: 1px;
 }
 </style>
 </head>
 <body>
 <div class="layer1">
 <div class="layer2">
 <img src="/CSS_3/img_css_3/html5.png" alt="Пингвин" />
 </div>
 </div>
 </body>
</html>

Результат применения свойства position

Пример 2

lt;!DOCTYPE html>
<html lang="ru">
<head>
<title>Свойство position</title>
<meta charset="utf-8">
<style type="text/css">
<!--
.roditel {
position:absolute;
width:99%;
height:100px;
border:5px double #0ba1d5;
background-color:indigo;
}
.element {
position:fixed;
top:10%;
left:10%;
border:5px double #0ba1d5;
padding:5px;
background-color:green;
}
-->
</style>
</head>
<body>
<div class="roditel">
<div class="element">
Вот посмотрите как распологается родительский
 элемент со значением position:absolute;,
в который вложен элемент со свойством position:fixed;
</div>
</div>
</body>
</html>

Результат примера.

Объектная модель

[window.]document.getElementById("elementID").style.position

Браузеры

Браузер Internet Explorer 6 значение fixed не поддерживает. Internet Explorer до версии 8.0 не поддерживает значение inherit.

Источники: http://htmlbook.ru/ и http://delaisait.ucoz.ru/

Поделись ссылкой на эту страницу с друзьями:

Категория: Позиционирование | Добавил: evkuriy (11.07.2013)

Просмотров: 904 | Теги: свойства CSS, position | Рейтинг: 0.0/0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]