Выбор ответа Junior Позиционирование и z-index обновлено
relative и соседи
Вопрос
Первому из трёх блоков задали position: relative; top: 50px. Что случится со вторым и третьим блоком?
Попробуйте сами
Выберите вариант, и откроется разбор.
Показать ответ и разбор
Коротко
Правильный ответ: Ничего: место первого в потоке сохраняется, сдвиг только визуальный. relative не вынимает элемент из потока: соседи раскладываются так, будто сдвига нет, и первый блок может наехать на второй.
Варианты ответа
- Они сдвинутся вниз на 50px вместе с первым, сохраняя отступы
- Они поднимутся и займут освободившееся место первого блока
- Первый блок станет липким, а остальные прокрутятся под ним
- Ничего: место первого в потоке сохраняется, сдвиг только визуальныйправильный ответ
Разбор
relative не вынимает элемент из потока: соседи раскладываются так, будто сдвига нет, и первый блок может наехать на второй. Соседи сдвинулись бы при изменении margin-top. Место освобождается у absolute и fixed. Липким элемент делает sticky.
Ответьте сами, а не прочитайте
В тренажёре вопрос попадёт в повторения и вернётся, когда начнёт забываться. Плюс билеты с зачётом: 20 вопросов, не больше 2 ошибок.
Ещё по теме «Позиционирование и z-index»
- Относительно чего позиционируется absolute
- Растянуть оверлей на весь блок
- Одинаковый z-index у двух блоков
- fixed внутри элемента с transform
- Containing block
- Контекст наложения
- Выпадающее меню прячется под блоком
- z-index: 9999 внутри контекста наложения