В чем разница между position fixed, absolute и relative

1️⃣ Как кратко ответить

position: fixed фиксирует элемент относительно окна браузера, он остается на месте при прокрутке страницы. position: absolute позиционирует элемент относительно ближайшего родителя с ненулевым значением position (кроме static) или относительно окна, если таких нет. position: relative смещает элемент относительно его нормального положения в документе, оставляя место, которое он занимал.

2️⃣ Подробное объяснение темы

В CSS свойство position определяет, как элемент будет позиционироваться на странице. Рассмотрим три значения: fixed, absolute и relative.

position: fixed

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

<div style="position: fixed; top: 10px; right: 10px;">
  Fixed Element
</div>

• position: fixed: Устанавливает фиксированное позиционирование.
• top: 10px; right: 10px;: Смещает элемент на 10 пикселей вниз и влево от верхнего правого угла окна браузера.

position: absolute

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

<div style="position: relative;">
  <div style="position: absolute; top: 20px; left: 30px;">
    Absolute Element
  </div>
</div>

• position: relative;: Устанавливает относительное позиционирование для родительского элемента, чтобы дочерний элемент мог позиционироваться относительно него.
• position: absolute;: Устанавливает абсолютное позиционирование для дочернего элемента.
• top: 20px; left: 30px;: Смещает дочерний элемент на 20 пикселей вниз и 30 пикселей вправо от верхнего левого угла родительского элемента.

position: relative

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

<div style="position: relative; top: 10px; left: 15px;">
  Relative Element
</div>

• position: relative;: Устанавливает относительное позиционирование.
• top: 10px; left: 15px;: Смещает элемент на 10 пикселей вниз и 15 пикселей вправо от его нормального положения.

Применение и примеры

• fixed используется для элементов, которые должны оставаться видимыми при прокрутке, например, для фиксированных заголовков или боковых панелей.
• absolute позволяет точно позиционировать элементы внутри контейнеров, например, для всплывающих окон или подсказок.
• relative часто используется для создания небольших смещений или для создания контекста позиционирования для дочерних элементов с absolute.

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