Модуль 1 · урок 7 з 14

Позиціонування і шари

Позиціонування — це те, чим роблять випадайки, тултіпи, липкі шапки й модалки. Тут же живе найзагадковіший баг фронтенду: «я поставив z-index: 9999, а воно все одно під сусіднім блоком». Розберемо, чому так, — і більше це питання не виникатиме.

П'ять значень position

Головне про absolute: від кого рахується

absolute шукає найближчого предка, у якого position не static, і позиціонується відносно нього. Якщо такого предка немає — відносно всієї сторінки, і елемент відлітає кудись у верхній лівий кут.

.field { position: relative; }          /* якір */
.field__icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);          /* точне вертикальне центрування */
}

Тому правило звучить так: ставиш дитині absolute — постав батькові relative. Це та сама пара, яка робить іконку в полі, бейдж на аватарі й кнопку закриття в кутку картки.

Sticky і чому він мовчки не працює

.table__head {
  position: sticky;
  top: 0;             /* обов'язково: без зміщення sticky нічого не робить */
  background: var(--surface);   /* інакше вміст просвічуватиме крізь */
  z-index: 1;
}

Три умови, без яких sticky просто поводиться як static:

1. Задано хоча б одне зміщення: top, bottom, left або right.
2. У жодного предка немає overflow: hidden чи auto — інакше «липкість» прив'язується до цього предка й ефект зникає.
3. Батько вищий за сам елемент — інакше липнути нема куди.

Контекст накладання: чому z-index не слухається

z-index порівнюється лише між сусідами в межах одного контексту накладання. Якщо два елементи в різних контекстах, їхні числа взагалі не порівнюються — виграє той, чий контекст вище.

Що створює новий контекст накладання

• position не static разом із будь-яким z-index, крім auto.
• opacity менша за 1 — так, навіть 0.99.
• transform, filter, backdrop-filter, perspective.
• will-change на будь-якій із цих властивостей.
• isolation: isolate — єдиний, який роблять навмисно саме заради цього.
• Елементи всередині flex або grid із заданим z-index.

Як з цим жити на практиці