3

The hover state of the card component somehow interferes with the z-index ordering. See the following GIF for context:

enter image description here

Here are the classes of the two components:

(I had to simplify the structure in order not to overcomplicate this question. I'm happy to provide more details if needed.)

// Dropdown
<div className='relative h-full w-full' ref={node} onClick={handleMenuClick}>
    {/* Menu button */}
    {children} // here I render different elements based on where the Dropdown is placed
    {/* Dropdown Content */}
    // I removed some classes to show only the relevant ones
    <div className=`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`} 
         onClick={(e) => e.stopPropagation()}>
        ... // Dropdown content
    </div>
</div>


// Card element
<a className='bg-gray-darkest rounded-xl p-8 hover:brightness-75' // note: this is where I'm having issues
   href={props.url}>
   <img src='...' alt='...'/>
   <div className='mt-6'>
        <h4 className='font-display text-lg'>{props.name}</h4>
   </div>
</a>

I tried to work around it by animating opacity vs brightness or using Tailwind's Groups to animate only some child components inside the card, but the effect is the same. Also removing the hover state and setting a static opacity or brightness value, breaks as well the order of the components.

Thanks for your support!

Francesco Bianchi
  • 772
  • 1
  • 4
  • 13
  • 1
    Are you running up against a new stacking context being formed when opacity is less than 1? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context – A Haworth Nov 02 '22 at 17:05
  • @AHaworth thanks! Indeed. Thanks for the link - good reminder about how a nested stack context work. – Francesco Bianchi Nov 02 '22 at 20:34

1 Answers1

1

Thanks for the info provided, I was able to identify the issue. Although the Dropdown had a z-index of 30, the Sidebar (the dropdown parent component) had an implicit z-index of 0 that placed the whole sidebar on the same level as the rest of the page.

Not sure how the opacity impacts how the browser interprets the various layers when they have the same z-index, but the right approach was to increase the z-index of the Sidebar compared to the page.

Francesco Bianchi
  • 772
  • 1
  • 4
  • 13