Как позиционировать модальное окно относительно части layout’а?

Question

Чтобы позиционировать модалку относительно части layout’а, контейнер делают position: relative, а модалку — position: absolute. Тогда координаты считаются от этого контейнера, а не от окна браузера. Такой подход полезен для локальных модалок, попапов и dropdown’ов. Для глобальных модалок обычно используют position: fixed и порталы.

YeaHub · Accepted Answer

Не все модалки должны быть “по центру экрана”.ОпределениеОпределение: Локальная модалка — это окно, которое привязано к конкретному блоку интерфейса, а не ко всему viewport.Базовый способ через relative + absolute.section {
  position: relative;
}

.modal {
  position: absolute;
  top: 0;
  right: 0;
}
position: relative задаёт контекстabsolute считает координаты от .sectionМодалка двигается вместе с блоком при скроллеКогда это особенно полезноВстроенные формы редактированияМодалки в админкахКонтекстные панелиЧастые проблемы и нюансыoverflowoverflow: hidden у родителя может обрезать модалкуz-indexНужно учитывать stacking contextScrollЛокальная модалка скроллится вместе с контентомКогда нужен порталИногда модалка логически относится к секции, но визуально должна быть выше всего.Используют Portal (в React)Позицию всё равно считают от target-элементаСам DOM-узел находится в body// координаты считаются через getBoundingClientRect
ВыводДля локальных модалок лучше использовать absolute внутри relative-контейнера, а для глобальных — порталы и fixed. Выбор зависит от UX-задачи, а не только от CSS.