CSS position Свойство
Пример
Поместите элемент <H2>:
h2
{
position: absolute;
left: 100px;
top: 150px;
}
Подробнее примеры ниже.
Определение и использование
Свойство position указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный, фиксированный или липкий).
| Значение по умолчанию: | static |
|---|---|
| Inherited: | no |
| Animatable: | no. Читайте о animatable |
| Version: | 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 Positioning
HTML DOM Справочник: position Свойство