Next.js Image always on top

Question

I am using Tailwind CSS to style a Next.js website. I have an image element for which I am using Next.js Image element.

Now I want to open a modal on top of the current page. But I don't want to completely black out the underlying page, just dim it. For this I am using an absolutely positioned element with a 50% opacity on top of everything else. With my current setup, everything below the absolutely positioned element does get dimmed, except for the Image elements which seem unaffected from everything.

The jsx looks like this:

<div>
  <div className='absolute inset-0 flex items-center justify-center bg-black'>
    <h1 className='bg-gray-600'>MODAL</h1>
  </div>
  <div className='px-auto mx-32 grid grid-cols-2 gap-3'>
    <h1 className='col-span-2 my-5 text-3xl font-black'>
      Header
    </h1>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text1</h1>
        <h2 className='text-xl font-bold'>text2</h2>
        <h3 className='text-lg'>text3</h3>
      </div>
    </div>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text4</h1>
        <h2 className='text-xl font-bold'>text5</h2>
        <h3 className='text-lg'>text6</h3>
      </div>
    </div>
  </div>
</div>

With this setup, every h1, h2, h3 gets dimmed by the absolute div. Only the two Image tags stay fully visible.

Is there something wrong with my setup?

Answer 1

The issue was the order of the elements. The absolutely positioned element should be below the other elements

<div>
  <div className='px-auto mx-32 grid grid-cols-2 gap-3'>
    <h1 className='col-span-2 my-5 text-3xl font-black'>
      Header
    </h1>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text1</h1>
        <h2 className='text-xl font-bold'>text2</h2>
        <h3 className='text-lg'>text3</h3>
      </div>
    </div>
    <div id='CardElem'>
      <div id='memberCard' className='p-3 shadow-2xl'>
        <Image alt='avatar' width=250 height=250 src='imgSrc' />
        <h1 className='text-2xl font-black'>text4</h1>
        <h2 className='text-xl font-bold'>text5</h2>
        <h3 className='text-lg'>text6</h3>
      </div>
    </div>
  </div>
  <div className='absolute inset-0 flex items-center justify-center bg-black'>
    <h1 className='bg-gray-600'>MODAL</h1>
  </div>
</div>