Пример
Позиционирует элемент h2:<html>
<head>
<meta charset="utf-8" />
<style>
h2 {
position:absolute;
left:100px;
top:150px;
}
</style>
</head>
<body>
<h2>Это заголовок с абсолютным позиционированием</h2>
<p>С абсолютным позиционированием, элемент может быть размещен в любом месте страницы. Заголовок ниже находится 100px от левой части страницы и 150px от верхней части страницы.</p>
</body>
</html>
Определение и использование
Свойство position используется для позиционирования элемента.
| Значение по умолчанию: | static |
|---|---|
| Унаследованный: | нет |
| Версия: | CSS2 |
| Синтакс JavaScript: | object.style.position="absolute" |
Поддержка браузеров
Свойство position поддерживается во всех ведущих браузерах.
Примечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. IE9 поддерживает "inherit".
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| absolute | Создает абсолютно позиционируемый элемент, расположенный относительно первого элемента его родителя, который имеет положение, отличное от статического. Позиция элемента определяется с помощью свойств "left", "top", "right" и "bottom" | Играйте » |
| fixed | Создает абсолютно позиционируемый элемент, расположенный относительно окна браузера. Позиция элемента определяется с помощью свойств "left", "top", "right" и "bottom" | Играйте » |
| relative | Создает относительно позиционируемый элемент, расположенный относительно его нормальной позиции, так "left:20" добавляет 20 пикселей к ЛЕВОЙ позиции элемента | Играйте » |
| static | По умолчанию. Нет позиционирования, элемент распологается в нормальном потоке (игнорируются любые определения top, bottom, left, right или z-index) | Играйте » |
| inherit | Указывает, что значение свойства position должно быть унаследовано от родительского элемента |
Больше примеров
Пример
Этот пример демонстрирует, как позиционировать элемент относительно его нормального положения.<html>
<head>
<meta charset="utf-8" />
<style>
h2.pos_left {
position:relative;
left:-20px;
}
h2.pos_right {
position:relative;
left:20px;
}
</style>
</head>
<body>
<h2>Этот заголовок без позиционирования</h2>
<h2 class="pos_left">Этот заголовок сдвинут влево относительно его нормальной позиции</h2>
<h2 class="pos_right">Этот заголовок сдвинут вправо относительно его нормальной позиции</h2>
<p>Относительное позиционирование сдвигает элемент ОТНОСИТЕЛЬНО его оригинальной позиции.</p>
<p>Стиль "left:-20px" вычитает 20 пикселей от оригинальной левой позиции элемента.</p>
<p>Стиль "left:20px" добавляет 20 пикселей к оригинальной левой позиции элемента.</p>
</body>
</html>
Была ли эта информация полезной?
