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

Не все модалки должны быть “по центру экрана”.

Определение

Определение: Локальная модалка — это окно, которое привязано к конкретному блоку интерфейса, а не ко всему viewport.

Базовый способ через relative + absolute

.section {
  position: relative;
}

.modal {
  position: absolute;
  top: 0;
  right: 0;
}

1. position: relative задаёт контекст

2. absolute считает координаты от .section

3. Модалка двигается вместе с блоком при скролле

Когда это особенно полезно

1. Встроенные формы редактирования

2. Модалки в админках

3. Контекстные панели

Частые проблемы и нюансы

1. overflow

   • overflow: hidden у родителя может обрезать модалку

2. z-index

   • Нужно учитывать stacking context

3. Scroll

   • Локальная модалка скроллится вместе с контентом

Когда нужен портал

Иногда модалка логически относится к секции, но визуально должна быть выше всего.

1. Используют Portal (в React)

2. Позицию всё равно считают от target-элемента

3. Сам DOM-узел находится в body

// координаты считаются через getBoundingClientRect

Вывод

Для локальных модалок лучше использовать absolute внутри relative-контейнера, а для глобальных — порталы и fixed. Выбор зависит от UX-задачи, а не только от CSS.