Чем отличаются значения position — static, relative, absolute, fixed, sticky?
- Относительно чего позиционируется absolute?
- Почему z-index не работает?
static — обычный поток. relative — остаётся в потоке, сдвигается относительно своего места и становится опорой для absolute-детей. absolute — выпадает из потока, позиционируется относительно ближайшего позиционированного предка. fixed — относительно окна. sticky — ведёт себя как relative, пока при прокрутке не достигнет порога, затем прилипает.
- z-index работает только у позиционированных элементов и внутри своего контекста наложения
- transform, opacity < 1, filter создают новый контекст наложения
- sticky не работает, если у предка overflow: hidden
А ещё У fixed опорой становится предок с transform — частая неожиданность
Подробно
Опора 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 меняет «окно», к которому он липнет.
Что хотят услышать
- Поведение каждого значения.
- Опора для absolute.
- Контекст наложения и z-index.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓absolute вне потока, от позиционированного предка; fixed — от окна; sticky липнет при прокрутке
- ✗relative выпадает из потока и позиционируется от окна, а absolute остаётся в потоке и сдвигается
- ✗fixed позиционируется относительно родителя
- ✗absolute позиционируется всегда относительно окна
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.