React中按钮z-index异常：默认层级按钮覆盖高z-index元素

核心原因：堆叠上下文的影响 #

z-index 并非全局生效，仅在当前堆叠上下文内有效。你遇到的问题大概率是以下原因导致：

• 遮罩元素的父容器（NavbarLeftLarge最外层的div）默认是position: static，未形成独立堆叠上下文，遮罩的z-index仅相对于根上下文计算。
• 按钮所在的父元素设置了position: relative/absolute/fixed，或添加了transform/filter/opacity这类会触发新堆叠上下文的样式。此时按钮的z-index会基于这个新上下文计算，哪怕按钮自身z-index更低，只要父堆叠上下文的层级高于遮罩，按钮就会显示在上方。
• 按钮设置颜色后出现问题，可能是颜色相关样式（比如框架自带的颜色类附带了transform/filter）触发了新的堆叠上下文，改变了层级计算规则。

具体修复步骤 #

1. 给遮罩的父容器添加定位，统一堆叠上下文 #

修改NavbarLeftLarge最外层div，添加定位属性让整个导航组件成为独立堆叠上下文：

export default function NavbarLeftLarge({ navState, setNavState}) {
    return (
        // 添加fixed定位和z-50，确保导航组件层级高于页面其他元素
        <div className={`${navState ? "block" : "hidden"} fixed inset-0 z-50`}>
            <div className={` bg-slate-400 w-28 h-screen absolute top-0 left-0 z-20 `}>
                <div className=" w-5/6 h-[385px] mt-16 mx-auto">
                        <LargeNavWidget name='Home'/>
                        <LargeNavWidget name='Invoices'/>
                        <LargeNavWidget name='Quotations'/>
                        <LargeNavWidget name='Clients'/>
                        <LargeNavWidget name='Emails'/>
                </div>
            </div>
            <div className='absolute top-0 right-0 bg-black bg-opacity-70 w-[calc(100vw-7rem)] h-screen z-10' onClick={() => setNavState(false)}></div>
        </div>
    );
}

这里将最外层div设为fixed inset-0 z-50，让导航组件的整体层级高于页面其他内容，遮罩的z-index设为z-10即可在导航上下文内覆盖其他元素。

2. 检查按钮父元素的堆叠上下文 #

查看按钮所在的父容器，是否存在以下属性：

• position: relative/absolute/fixed/sticky且设置了z-index
• transform: none以外的值
• filter: none以外的值
• opacity: < 1
• will-change: transform/filter

如果有这些属性，要么移除不必要的属性，要么给父容器设置更低的z-index（比如z-0），确保它的堆叠层级低于导航组件。

3. 根容器层级兜底 #

如果不确定哪个父元素触发了堆叠上下文，可以给页面根容器（比如#root或最外层页面容器）设置z-0，确保它的层级低于导航组件的z-50。

验证方法 #

通过浏览器开发者工具：

• 选中遮罩元素，查看Elements面板的Computed标签，确认z-index的生效上下文
• 选中按钮元素，查看它的堆叠上下文链，对比和遮罩的层级关系

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