Одним из самых важных свойств CSS является position. Оно определяет, как элемент располагается на странице и каким образом на него влияют координаты top, right, bottom и left.

Свойство position имеет пять основных значений: «static», «relative», «absolute», «fixed», «sticky».

Разберём каждое из них с примерами.

1. Position: static

static — это значение по умолчанию для всех HTML-элементов.

Элемент располагается в обычном потоке документа. Свойства top, left, right и bottom для него не работают.

Пример:

<div class="box static">Static</div>
.box {
    width: 120px;
    height: 120px;
    background: steelblue;
    color: white;
}
.static {
    position: static;
    top: 50px; /* Не сработает */
    left: 100px; /* Не сработает */
}

Что происходит?

Несмотря на указанные top и left, блок останется на своём обычном месте.

2. Position: relative

relative позволяет сместить элемент относительно его первоначального положения.

Главная особенность:

• Элемент остаётся в потоке документа;
• Место под него сохраняется;
• Можно использовать top, left, right, bottom.

Пример:

<div class="box relative">Relative</div>
.relative {
    position: relative;
    top: 30px;
    left: 50px;
}

Что произойдёт?

Элемент визуально сместится:

• Вниз на 30px;
• Вправо на 50px.

Но пространство, где он находился изначально, останется пустым.

Схематично:

До:
[Box]
После: 
(старое место)
          [Box]

Relative как родитель

Очень часто relative используют не для смещения.

Его задача — стать системой координат для абсолютно позиционированных элементов.

.parent { 
    position: relative;
}

Это один из самых популярных приёмов в CSS.

3. Position: absolute

absolute полностью исключает элемент из нормального потока документа.

Это означает:

• Остальные элементы ведут себя так, будто его нет;
• Координаты рассчитываются относительно ближайшего родителя с position, отличным от static.

Пример:

<div class="parent">
    <div class="child">Absolute</div>
</div>

.parent {
    width: 300px;
    height: 200px;
    border: 2px solid black;
    position: relative;
}

.child {
    position: absolute;
    top: 20px;
    right: 20px;

    width: 80px;
    height: 80px;
    background: tomato;
}

Что происходит?

Блок окажется в правом верхнем углу родителя.

+------------------------+
|                  [Box] |
|                        |
|                        |
+------------------------+

Если родителя с position нет

Тогда координаты будут вычисляться относительно всей страницы (body или окна браузера).

.child {
    position: absolute;
    top: 0;
    left: 0;
}

Элемент окажется в левом верхнем углу страницы.

Relative + Absolute

Самая распространённая комбинация.

<div class="card">
    <span class="badge">New</span>
</div>

.card {
    position: relative;
    width: 250px;
    height: 150px;
    background: #eee;
}

.badge {
    position: absolute;
    top: 10px;
    right: 10px;

    background: crimson;
    color: white;
    padding: 5px 10px;
}

Так размещают: бейджи, иконки, кнопки закрытия, индикаторы уведомлений.

4. Position: fixed

fixed фиксирует элемент относительно окна браузера.

Он:

• Не зависит от прокрутки страницы;
• Всегда остаётся на одном месте.

Пример:

<button class="chat">
    ?
</button>
.chat {
    position: fixed;

    bottom: 20px;
    right: 20px;

    width: 60px;
    height: 60px;
    border-radius: 50%;
}

Результат — при прокрутке страницы кнопка останется в правом нижнем углу.

Именно так работают: кнопки «Наверх», онлайн-чаты, плавающие меню, кнопки поддержки.

5. Position: sticky

sticky сочетает свойства relative и fixed.

До определённого момента элемент ведёт себя как обычный.

Когда пользователь прокручивает страницу до заданной точки, элемент «прилипает».

Пример:

<h2 class="title">
    Новости
</h2>

.title {
    position: sticky;
    top: 0;

    background: white;
    padding: 15px;
}

Что происходит?

При обычной прокрутке заголовок находится на своём месте.

Когда он касается верхней части окна, становится фиксированным.

После окончания родительского контейнера снова перестаёт быть фиксированным.

Sticky отлично подходит для: заголовков таблиц, меню сайта, панели фильтров, навигации по разделам.

Сравнение всех видов позиционирования

Понимание различий между этими режимами позиционирования — основа создания современных интерфейсов, адаптивных макетов и сложных элементов пользовательского интерфейса.