static — обычный поток. relative — остаётся в потоке, сдвигается относительно своего места и становится опорой для absolute-детей. absolute — выпадает из потока, позиционируется относительно ближайшего позиционированного предка. fixed — относительно окна. sticky — ведёт себя как relative, пока при прокрутке не достигнет порога, затем прилипает.
А ещё У fixed опорой становится предок с transform — частая неожиданность
Так подсказку видит пользователь sotto на живом собеседовании — за пару секунд, пока вы думаете вслух.
Опора absolute — ближайший предок с position, отличным от static (или с transform). Нет такого — начальный блок страницы. Отсюда приём: родителю position: relative, ребёнку position: absolute; top: 0; right: 0.
Контекст наложения. z-index сравнивается только между элементами одного контекста. Элемент с z-index: 9999 внутри родителя с z-index: 1 не перекроет соседа родителя с z-index: 2. Контекст создают: позиционирование с z-index, opacity < 1, transform, filter, isolation: isolate.
sticky требует указать порог (top: 0) и прилипает в пределах родителя; прокручиваемый предок с overflow меняет «окно», к которому он липнет.
sotto слышит вопрос интервьюера и показывает короткий ответ и план, как в блоке «Коротко». Оставьте контакт — пришлём доступ и промокод.
sotto