Что такое position?

Свойство position определяет, как элемент будет позиционироваться на странице. Оно может принимать несколько значений:

static (по умолчанию)
relative
absolute
fixed
sticky

Каждое из этих значений работает по-своему.

position: static;

Это значение по умолчанию. Элементы с position: static; располагаются в обычном потоке документа. Это значит, что они следуют друг за другом в том порядке, в котором они написаны в HTML.

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>

.box {
  width: 100px;
  height: 100px;
  background-color: lightblue;
  margin: 10px;
}

В этом примере все блоки будут располагаться друг под другом, как обычно.

position: relative;

Элемент с position: relative; ведет себя почти так же, как и static, но его можно сдвигать с помощью свойств top, bottom, left и right. Эти свойства указывают, на сколько пикселей элемент должен быть сдвинут относительно своего обычного положения.

.box {
  position: relative;
  top: 20px; /* Сдвигаем элемент на 20px вниз */
  left: 30px; /* Сдвигаем элемент на 30px вправо */
}

Теперь первый блок будет сдвинут на 20 пикселей вниз и на 30 пикселей вправо относительно своего исходного положения.

position: absolute;

Элемент с position: absolute; вырывается из обычного потока документа и позиционируется относительно ближайшего родительского элемента с position: relative;, absolute;, fixed; или sticky;. Если такого родителя нет, элемент будет позиционироваться относительно всего документа.

<div class="container">
  <div class="box">1</div>
  <div class="box absolute-box">2</div>
  <div class="box">3</div>
</div>

.container {
  position: relative; /* Делаем контейнер относительным */
  width: 300px;
  height: 200px;
  background-color: lightgray;
}
.absolute-box {
  position: absolute;
  top: 50px; /* Сдвигаем элемент на 50px вниз от верха контейнера */
  left: 100px; /* Сдвигаем элемент на 100px вправо от левого края контейнера */
}

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

position: fixed;

Элемент с position: fixed; всегда остается на одном и том же месте на экране, даже если страница прокручивается. Он позиционируется относительно окна браузера.

.fixed-box {
  position: fixed;
  bottom: 20px; /* Элемент будет всегда на 20px выше нижнего края экрана */
  right: 20px; /* Элемент будет всегда на 20px от правого края экрана */
  width: 100px;
  height: 100px;
  background-color: lightcoral;
}

Этот блок всегда будет виден в правом нижнем углу экрана, даже если ты прокрутишь страницу вниз.

position: sticky;

Элемент с position: sticky; ведет себя как relative, пока он находится в видимой области экрана. Но как только ты прокручиваешь страницу, и элемент достигает определенной позиции (например, верхнего края экрана), он "прилипает" и остается на месте.

.sticky-box {
  position: sticky;
  top: 0; /* Элемент прилипнет к верхнему краю экрана */
  background-color: lightgreen;
}

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

Как выбрать подходящее значение?

static: Используй, если не нужно ничего особенного.

relative: Если нужно немного сдвинуть элемент относительно его обычного положения.

absolute: Если нужно точно позиционировать элемент внутри другого элемента.

fixed: Если нужно, чтобы элемент всегда оставался на одном месте на экране.

sticky: Если нужно, чтобы элемент "прилипал" при прокрутке.

Практические советы

Используй position: relative; для родительских элементов: Это поможет тебе позиционировать дочерние элементы с position: absolute; относительно родителя.

Будь осторожен с position: fixed;: Такие элементы могут перекрывать другие части страницы, особенно на мобильных устройствах.

Экспериментируй: Попробуй разные значения position и посмотри, как они работают. Это лучший способ понять их поведение.