Позиціювання в CSS дозволяє керувати розташуванням елементів на сторінці. Завдяки властивості position можна задати тип позиціювання, що визначає, як елемент буде вести себе в рамках звичайного потоку документа, чи вийде з нього, а також як реагуватиме на зсуви, задані за допомогою властивостей top, bottom, left та right.

Static

За замовчуванням кожен HTML-елемент має значення position: static;. Статичні елементи розташовуються згідно з нормальним потоком документа, і властивості зсуву (top, right, bottom, left) на них не впливають.

Приклади:

<div class="static">Це статичний елемент</div>

.static {
  position: static;
  background-color: #f0f8ff;
  padding: 10px;
  border: 1px solid #ccc;
}

Relative

Елемент із position: relative; спочатку розташовується згідно з нормальним потоком документа, а потім може бути зміщений відносно свого початкового місця. Важливо: простір, який елемент займав у звичайному потоці, залишається незмінним, а зсув не впливає на розташування інших елементів.

Приклади:

<div class="relative">Це відносно позиціонований елемент</div>

.relative {
  position: relative;
  top: 20px; /* Зсуваємо елемент на 20px вниз */
  left: 30px; /* Зсуваємо елемент на 30px вправо */
  background-color: #e6ffe6;
  padding: 10px;
  border: 1px solid #8bc34a;
}

https://stackblitz.com/edit/web-platform-ppalnaex?embed=1&file=styles.css

Absolute

Елемент із position: absolute; видаляється із нормального потоку. Він позиціонується відносно свого найближчого позиціонованого батьківського елемента (тобто того батьківського елемента, чия властивість position не дорівнює static). Якщо такого немає, відлік ведеться від початку документа (вікна браузера).

Приклади:

<div class="container">
  <div class="absolute">Абсолютно позиціонований</div>
  <p>Інший звичайний вміст</p>
</div>

.container {
  position: relative; /* Задаємо контекст для абсолютного позиціонування */
  padding: 20px;
  border: 1px solid #aaa;
  height: 150px;
}
.absolute {
  position: absolute;
  top: 30px;    /* 30px від верхньої межі контейнера */
  right: 20px;  /* 20px від правої межі контейнера */
  background-color: #ffe6e6;
  padding: 10px;
  border: 1px solid #ff5722;
}