Как отобразить всплывающее окно, которое может выходить за пределы своего родителя, но позиционируется относительно него?

Question

Я работаю над одностраничным веб-приложением со следующими требованиями

1. Приложение разделено на панели
2. Вы можете навести указатель мыши на определенные элементы на панели, чтобы отобразить всплывающее окно
3. Всплывающее окно должно отображаться за пределами панели, содержащей элемент запуска
4. Прокрутка панели вверх / вниз должна перемещать всплывающее окно с элементом запуска

У меня есть код, который копирует эту настройку и тривиально удовлетворяет ограничениям №1 и №2: https://codepen.io/mmmkkaaayy/pen/RwWMaMo

В Javascript в строке 3 есть функция flag relativeToLeft

Если флаг истинен, ограничение №4 выполняется, а ограничение №3 - нет. Всплывающее окно закрыто (несмотря на высокий z-index)
Если флаг ложный, ограничение №3 выполняется, а ограничение №4 - нет. Прокрутка вверх / вниз сохраняет координаты всплывающего окна относительно тела, а не относительно диапазона hover.

Можно ли встретить и №3, и №4 без написания обработчика событий прокрутки, который перемещает всплывающее окно при каждой стрельбе? При написании обработчика событий прокрутки создается впечатление, что я заново реализую относительное позиционирование, которое браузер уже делает. Поэтому я просто хочу убедиться, что нет других разумных вариантов, которые могли бы удовлетворить мои ограничения.