Opacity/Brightness类修饰符破坏z-index层级排序问题求助

卡片组件的hover状态（设置brightness-75）会干扰Dropdown组件的z-index层级排序，即使移除hover状态、设置静态的opacity或brightness值，同样会破坏层级。相关组件简化代码如下：

Dropdown组件代码 #

<div className='relative h-full w-full' ref={node} onClick={handleMenuClick}>
    {/* Menu button */}
    {children} // 根据Dropdown的位置渲染不同元素
    {/* Dropdown Content */}
    <div className={`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`} 
         onClick={(e) => e.stopPropagation()}>
        ... // Dropdown内容
    </div>
</div>

Card组件代码 #

<a className='bg-gray-darkest rounded-xl p-8 hover:brightness-75' // 问题出在这里
   href={props.url}>
   <img src='...' alt='...'/>
   <div className='mt-6'>
        <h4 className='font-display text-lg'>{props.name}</h4>
   </div>
</a>

核心原因是：当元素应用filter（包括brightness）、opacity < 1这类属性时，会自动创建新的CSS堆叠上下文。此时该元素的堆叠层级会独立于其他元素，哪怕Dropdown设置了更高的z-index，只要卡片的堆叠上下文层级更高，就会覆盖Dropdown。

方案1：将hover效果转移到卡片内部容器 #

避免在卡片根元素（<a>标签）上使用brightness或opacity，转而在内部嵌套的容器上应用hover样式，这样根元素不会创建堆叠上下文：

<a className='bg-gray-darkest rounded-xl p-8' href={props.url}>
  {/* 把hover效果移到这个内部div上 */}
  <div className='hover:brightness-75'>
    <img src='...' alt='...'/>
    <div className='mt-6'>
      <h4 className='font-display text-lg'>{props.name}</h4>
    </div>
  </div>
</a>

方案2：给Dropdown的父容器创建更高层级的堆叠上下文 #

如果必须在卡片根元素上保留样式，给Dropdown的外层容器添加position: relative和足够高的z-index，确保它的堆叠上下文层级超过卡片：

<div className='relative h-full w-full z-10' ref={node} onClick={handleMenuClick}>
    {/* Menu button */}
    {children}
    {/* Dropdown Content */}
    <div className={`right top ${isMenuOpen ? 'block' : 'hidden'} absolute z-30 rounded`} 
         onClick={(e) => e.stopPropagation()}>
        ... // Dropdown内容
    </div>
</div>

方案3：替换为不触发堆叠上下文的hover样式 #

如果不需要滤镜效果，可以用其他不触发堆叠上下文的样式实现hover反馈，比如：

• 用深色系的background-color变体替代brightness-75
• 用box-shadow或border的变化体现hover状态

内容的提问来源于stack exchange，提问作者Francesco