Свойство position в CSS
- предыдущая страница pointer-events
- Следующая страница @property
Определение и использование
Атрибут position определяет тип позиционирования элемента.
Описание
Эта свойство определяет механизм позиционирования, используемый для создания макета элементов. Любой элемент может быть позиционирован, но абсолютные или фиксированные элементы создают блоковый контейнер, независимо от типа элемента. Элементы относительного позиционирования смещаются относительно их нормального местоположения в потоке.
См. также:
Уроки CSS:CSS позиционирование
Руководство по HTML DOM:Свойство position
Пример
Позиционирование элемента h2:
h2
{
position:absolute;
left:100px;
top:150px;
}
CSS синтаксис
position: static|absolute|fixed|relative|sticky|initial|inherit;
Значение атрибута
| Значение | Описание |
|---|---|
| absolute |
Генерирует элемент абсолютного позиционирования, позиционируемый относительно первого родительского элемента, кроме static позиционирования. Позиция элемента определяется свойствами "left", "top", "right" и "bottom". |
| fixed |
Генерирует элемент绝对ного позиционирования, позиционируемый относительно окна браузера. Позиция элемента определяется свойствами "left", "top", "right" и "bottom". |
| relative |
Генерирует элемент относительного позиционирования, позиционируемый относительно его нормального местоположения в потоке. Таким образом, "left:20" добавляет 20 пикселей к LEFT позиция элемента. |
| static | Значение по умолчанию. Без позиционирования, элемент появляется в нормальном потоке (игнорируются значения top, bottom, left, right или z-index). |
| inherit | Определяет, что значение свойства position должно быть принято от родительского элемента. |
Технические детали
| Значение по умолчанию: | static |
|---|---|
| Инheritance: | нет |
| Версия: | CSS2 |
| JavaScript синтаксис: | object.style.position="absolute" |
Пример TIY
- Позиционирование: относительное позиционирование
- Этот пример демонстрирует, как позиционировать элемент относительно его нормального местоположения.
- Позиционирование: абсолютное позиционирование
- Этот пример демонстрирует, как использовать абсолютные значения для позиционирования элементов.
- Позиционирование: фиксированное позиционирование
- Этот пример демонстрирует, как позиционировать элементы относительно окна браузера.
- Установка формы элементов
- Этот пример демонстрирует, как устанавливать форму элементов. Этот элемент обрезается до этой формы и отображается.
- Z-index
- Z-index может быть использован для размещения одного элемента за другим.
- Z-index
- Элемент в примере изменил значение Z-index.
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Chrome | IE / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| 1.0 | 7.0 | 1.0 | 1.0 | 4.0 |
- предыдущая страница pointer-events
- Следующая страница @property
