Как блок уведомлений поднять выше dialog?

Question

[accountnujen]

popup окна у меня реализованы через .
Также у меня есть отдельный блок (toast), который отображает уведомления, типа "ошибка" или "успех". Маленькая плашка внизу сайта высотой 20px.
Из-за того, что dialog находится в top-layer - мой toast не видно.
ИИ предложил мне делать appendChild и помещать toast внутрь dialog. А когда dialog закрывается - вытаскивать его от туда.
Также из предложенных вариантов - это использование Popover API, но его нормальная поддержка (по данным can i use) появилась только в 25 году, а для меня моральная отсечка - это 2022 год.
Учитывая, что "переход на dialog" - это тоже его идея, прошу подсказать, как можно решить задачу. Вариант - отказаться от dialog - тоже рассматриваю.

Answer 1

[Владислав Мельников]

В вашем случае, когда используется элемент , он по умолчанию отображается в так называемом top-layer, что приводит к тому, что другие элементы, такие как уведомления (toast), могут быть скрыты. Это связано с тем, что элементы в top-layer имеют более высокий z-index и перекрывают другие элементы на странице.
Наверное, возможные решения:
1. Перемещение toast внутрь dialog.
2. Использование Popover API.
3. Отказ от dialog.
4. Изменение z-index.
Это я вкратце накидал, если надо будет, могу более подробно расписать.