不透明度类修饰器破坏了 z-index 层次顺序。

Question

卡片组件的悬停状态会干扰z-index的顺序。请参考以下GIF以了解上下文：

以下是这两个组件的类：

（为了不过于复杂化这个问题，我不得不简化结构。如果需要，我很乐意提供更多细节。）

// 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>

我试图通过动画的透明度与亮度或使用Tailwind的Groups来仅对卡片内的一些子组件进行动画处理，但效果是相同的。同时移除悬停状态并设置静态的透明度或亮度值也会破坏组件的顺序。

谢谢您的支持！

- Francesco Bianchi

---

当不透明度小于1时，您是否遇到了新的堆叠上下文形成的问题？https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context - A Haworth

@AHaworth 谢谢！确实。感谢您提供的链接-很好地提醒了嵌套堆栈上下文的工作方式。 - Francesco Bianchi

Answer 1

感谢提供的信息，我能够确定问题所在。尽管下拉菜单的z-index为30，但是侧边栏（下拉菜单的父组件）具有一个隐式的z-index为0，这将整个侧边栏置于页面的同一级别。

不确定不透明度如何影响浏览器解释具有相同z-index的各个层次，但正确的方法是将侧边栏的z-index与页面进行比较，增加它的值。

- Francesco Bianchi

---

隐式的 z-index（或默认值）不是 0，而是 auto，这可能会产生差异。 - Temani Afif