В чем особенности изменения position?

Особенности CSS position

Свойство position в CSS определяет, как элемент позиционируется на странице. Это одна из самых важных концепций в верстке, но имеет много подводных камней.

Основные значения position

1. static (по умолчанию)

Элемент размещается в нормальном потоке документа:

position: static;
/* Свойства top, right, bottom, left ИГНОРИРУЮТСЯ */
/* Margins работают нормально */

• Элемент занимает свое естественное место
• top/bottom/left/right не имеют эффекта
• z-index игнорируется

2. relative

Элемент позиционируется относительно своего нормального положения:

position: relative;
top: 10px;
left: 20px;

Особенности:

• Элемент остаётся в потоке документа (занимает место)
• Смещается относительно себя самого
• top/bottom/left/right работают
• Может быть контейнером для absolute детей

<style>
  .parent {
    position: relative;
  }
  .child {
    position: absolute;
    top: 0;
    left: 0;
  }
</style>

<!-- .child позиционируется относительно .parent -->

3. absolute

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

position: absolute;
top: 0;
right: 0;

Особенности:

• Выходит из потока — не занимает место (другие элементы игнорируют его)
• Позиционируется относительно ближайшего родителя с position != static
• Если родителя нет — относительно body
• Размеры можно задать (width/height)
• z-index работает

Проблемы:

<div style="position: static"> <!-- Это static! -->
  <div style="position: absolute; top: 0; left: 0;">
    Я позиционируюсь относительно BODY, не родителя!
  </div>
</div>

<!-- Правильно: -->
<div style="position: relative"> <!-- Теперь контейнер -->
  <div style="position: absolute; top: 0; left: 0;">
    Я позиционируюсь относительно родителя
  </div>
</div>

4. fixed

Элемент позиционируется относительно viewport (экрана):

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;

Особенности:

• Не прокручивается — остаётся на месте при скролле
• Не зависит от родителей
• Выходит из потока
• Часто используется для хедеров, модалей, floating-кнопок

Проблема с трансформами:

/* ВНИМАНИЕ: Если родитель имеет transform, fixed работает как absolute! */
<div style="transform: translateX(10px)">
  <div style="position: fixed; top: 0; left: 0;">
    Позиционируется относительно transform-родителя, не viewport!
  </div>
</div>

5. sticky

Гибридный режим между relative и fixed:

position: sticky;
top: 0;

Особенности:

• Элемент ведёт себя как relative пока видим его
• Становится fixed когда доскролливаем до top: 0
• Остаётся в потоке
• Не выходит за границы родителя

<div style="height: 200px; overflow: auto;">
  <div style="position: sticky; top: 0;">
    Я липну к верху при скролле, но остаюсь в контейнере
  </div>
  <!-- Много контента -->
</div>

Ключевые особенности

Контекст стекирования (Stacking Context)

Когда вы используете position + z-index, создается новый стеking context:

position: relative;
z-index: 1;

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

• z-index внутри этого контекста сравнивается между собой
• z-index НЕ сравнивается с элементами вне контекста

<!-- z-index: 100 НЕ будет выше z-index: 2! -->
<div style="position: relative; z-index: 2;">
  <div style="position: relative; z-index: 100;">
    Я выше соседей, но не выше родителя
  </div>
</div>

Коллапс margin

При изменении position поведение margin может измениться:

/* position: static - margins коллапсят вертикально */
div { margin-top: 20px; margin-bottom: 20px; }
/* Итого: 20px, не 40px */

/* position: absolute/fixed - margins НЕ коллапсят */
/* Итого: 40px */

Width и height

При absolute/fixed можно растягивать элемент:

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Элемент растянется на весь родитель */

Практические примеры

Модальное окно

// Фон
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5);"></div>

// Модаль
<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px;">
  Содержимое модали
</div>

Floating кнопка

position: fixed;
bottom: 20px;
right: 20px;
z-index: 999;

Липкий заголовок таблицы

thead {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Частые ошибки

1. Забыли задать position: relative родителю — absolute потомки позиционируются относительно body
2. Трансформы меняют behaviour fixed — будьте осторожны с transform на родителях
3. z-index без position — z-index работает только с position != static
4. fixed на мобильных — поведение может отличаться (VH units, клавиатура)
5. sticky не работает в overflow контейнере — нужен min-height родителя

Вывод

Position — фундаментальное свойство CSS. Главное помнить:

• relative — смещение от себя, остаётся в потоке
• absolute — от ближайшего позиционированного родителя, выходит из потока
• fixed — от viewport, не прокручивается
• sticky — гибрид relative + fixed внутри родителя

Понимание этих различий критично для правильной верстки.