Свойство position определяет, как элемент располагается на странице. Вместе со свойствами top, right, bottom, left и z-index можно управлять положением и наложением элементов.

1. static — значение по умолчанию

Элемент располагается в обычном потоке страницы. Свойства top, left и z-index не работают.

.static {
    position: static;
    /* top, left не сработают */
}

2. relative — относительно себя

Элемент остаётся в потоке, но его можно сдвинуть относительно исходного положения. Сдвиг не влияет на соседние элементы.

Свойства смещения: top, right, bottom, left.

.relative {
    position: relative;
    top: 10px;
    left: 20px;
}

3. absolute — абсолютное позиционирование

Элемент вырывается из потока (соседние элементы его игнорируют). Позиционируется относительно ближайшего позиционированного родителя (не static). Если такого нет — относительно окна браузера.

.parent {
    position: relative;
    height: 150px;
    background: #f0f0f0;
}
.absolute {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

4. fixed — относительно окна браузера

Элемент фиксируется относительно окна браузера и не двигается при прокрутке. Вырывается из потока.

.fixed {
    position: fixed;
    bottom: 20px;
    right: 20px;
}

5. sticky — прилипающий элемент

Элемент ведёт себя как relative, но когда достигает заданной границы, «прилипает» и становится фиксированным.

.sticky {
    position: sticky;
    top: 0;
}

6. z-index — наложение слоёв

Определяет, какой элемент будет выше при наложении. Работает только для позиционированных элементов (не static). Чем больше число, тем элемент выше.

.low {
    position: relative;
    z-index: 1;
}
.high {
    position: relative;
    z-index: 10;
}

7. Сравнение всех значений position

Значение	В потоке	Относительно чего
static	✅ да	—
relative	✅ да	себя
absolute	❌ нет	ближайшего позиционированного родителя
fixed	❌ нет	окна браузера
sticky	✅ да	себя (до границы)