How to work with z indexes in absolute positioning HTML, CSS

I am working on a functionality where clicking on an option in the menu will open up a Modal. The menu to display options has absolute position and modal backdrop has fixed position. The modal backdrop also has flex justify-center items-center class to center the modal.

In current functionality, clicking on buttton opens the modal but menu options still come on top of modal.(z index wise.)

I am aware that working with absolute position disturbs the existing document flow, but I need it so that the shareMenuOptions which are opened on clicking the button do not occupy any extra space.

I will share the basic structure to provide more clarity on what I am saying.

The project is made in nextjs.

<TestiMonialItem/> # flex-col
   <TestimonialToolbar/> #flex (displays three actions related to testimonial item)
      <ShareButton/> #flex-col (one of the actions)
         <Button>Share</Button> (Clicking on it opens share Menu options)
         <ShareMenuOptions> -> absolute

Code for Share Menu options:

 <div
        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"
      >
        <span
          className="p-2 hover:bg-slate-300 w-full text-left cursor-pointer flex items-center"
          onClick={(e) => setShowEmbedTestimonialModal(true)}
        >
          <Code className="text-tiny mr-3" />
          Embed the testimonial
        </span>
        <span className="p-2 hover:bg-slate-300 w-full text-left cursor-pointer flex items-center">
          <Link className="text-tiny mr-3" />
          Get the link
        </span>
      </div>

Desired functionality

When I click on embed the testtimonial, The embed modal should Come on top of it and hide it.

Current functionality

THe shareMenuOptions come on top of the Embed Modal

I have attached the screenshot for reference

Share Menu options are not opened
Share Menu options are opened by clicking on share button
Displaying the embed modal by clicking the Embed the testimonal option.

As you can see, the shareMenuOptions come on top of my `EmbedModal, which is not what I want. Is there any way to fix this?