Создание сайта на CMS WordPress: обучение и хостинг

СВОЙСТВО POSITION

Свойство position указывает тип метода позиционирования, используемого для элемента.

Поддержка браузеров

Синтаксис

position: static|absolute|fixed|relative|sticky|initial|inherit

Значения свойства

Значение	Описание
static	Элемент отображается как обычно. Свойства left, top, right и bottom не будет производить эффекта.
absolute	Элемент позиционируется относительно своего первого позиционированного (не статического) родительского элемента.
fixed	Элемент позиционируется относительно окна браузера.
relative	Элемент позиционируется относительно своей нормальной позиции.
sticky	Элемент позиционируется на основе позиции прокрутки пользователя.
initial	Устанавливает значение по умолчанию.
inherit	Унаследует значение свойства от родительского элемента.

Песочница

<div class="container">
    <div class="block-1"></div>
    <div class="block-2"></div>
</div>

HTML

.container {
    position: relative;
    background: beige
}

.block-1,
.block-2 {
    width: 100px;
    height: 100px
}

.block-1 {
    position: relative;
    background: blue;
    z-index: 2
}

.block-2 {
    position: absolute;
    background: purple;
    top: 20px;
    left: 20px;
    z-index: 1
}

CSS

← Перейти к списку свойств