Как работать с индексами z в абсолютном позиционировании HTML, CSS ⇐ CSS

[Anonymous]

Я работаю над функцией, при которой нажатие на опцию в меню откроет модальное окно. Меню для отображения параметров имеет абсолютное положение, а модальный фон имеет фиксированное положение. Модальный фон также имеет класс flex justify-center items-center для центрирования модального окна.
В текущей функциональности нажатие кнопки открывает модальное окно, но пункты меню по-прежнему находятся сверху. модального. (индекс z.)
Я знаю, что работа с абсолютной позицией нарушает существующий поток документов, но мне это нужно, чтобы ShareMenuOptions которые открываются при нажатии кнопки, не занимают дополнительного места.
Я поделюсь базовой структурой, чтобы было больше ясности в том, что я говорю.
Проект выполнен на nextjs.

Код: Выделить всё

 # flex-col
 #flex (displays three actions related to testimonial item)
 #flex-col (one of the actions)
Share (Clicking on it opens share Menu options)
 -> absolute

Код для опций меню «Поделиться»:

Код: Выделить всё

         ref={shareMenuRef}
className="text-sm max-h-fit mr-[250px] absolute mt-[50px] w-[200px] flex flex-col items-start bg-slate-200 rounded-md"
>
 setShowEmbedTestimonialModal(true)}
>

Embed the testimonial


[*]
Get the link

Желаемая функциональность
Когда я нажимаю «Встроить тесттимониал», модальное окно встраивания должно появиться поверх него и скрыть его.Текущая функциональность
Параметры ShareMenuOptions появляются поверх модального окна для встраивания.
Для справки я приложил скриншот

• Параметры меню «Поделиться» не открываются
  
• Параметры меню «Поделиться» открываются при нажатии кнопки «Поделиться»
  
• Отображение модального окна встраивания, нажав кнопку Встроить вариант отзыва.

Как видите, ShareMenuOptions находится поверх моего `EmbedModal, который это не то, что я хочу. Есть ли способ это исправить?

Подробнее здесь: https://stackoverflow.com/questions/791 ... g-html-css