СSS Свойство position
Пример
Расположить элемент <h2>:
h2
{
position: absolute;
left: 100px;
top: 150px;
}
Попробуйте сами »
Определение и использование
Свойство position указывает тип метода позиционирования, используемого для элемент (статический, относительный, абсолютный, фиксированный или липкий).
| Значение по умолчанию: | static |
|---|---|
| Унаследованный: | нет |
| Анимируемый: | нет. Прочитать о animatable |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.position="absolute" Попробовать |
Поддержка браузеров
Числа в таблице указывают первую версию браузера, которая полностью поддерживает свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| position | 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
Примечание: Значение sticky не поддерживается в Internet Explorer или Edge 15 и более ранних версиях.
CSS Синтаксис
position: static|absolute|fixed|relative|sticky|initial|inherit;
Значения свойств
| Значение | Описание | Воспроизвести |
|---|---|---|
| static | Значение по умолчанию. Элементы отображаются в порядке их появления в потоке документов | Воспроизвести » |
| absolute | Элемент позиционируется относительно своего первого позиционированного (не статического) элемента предка | Воспроизвести » |
| fixed | Элемент располагается относительно окна браузера | Воспроизвести » |
| relative | Элемент позиционируется относительно своего нормального положения, таким образом, "left:20px" добавляет 20 пикселей на элемент левой позиции | Воспроизвести » |
| sticky | Элемент позиционируется в зависимости от положения прокрутки пользователя
Липкий элемент переключается между |
Попробовать » |
| initial | Устанавливает для этого свойства значение по умолчанию. Прочитать о initial | Воспроизвести » |
| inherit | Наследует это свойство от родительского элемента. Прочитать о inherit |
Примеры
Пример
Расположить элемент относительно его нормального положения:
h2.pos_left {
position: relative;
left: -20px;
}
h2.pos_right {
position: relative;
left: 20px;
}
Попробуйте сами »
Пример
Больше позиционирования:
#parent1 {
position: static;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child1 {
position:
absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
#parent2 {
position: relative;
border: 1px solid blue;
width: 300px;
height: 100px;
}
#child2 {
position: absolute;
border: 1px solid red;
top: 70px;
right: 15px;
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Позиционирование
HTML DOM Справочник: Свойство position
