React+Tailwind CSS过渡变换导致固定导航栏被下层元素重叠如何解决

问题根因 #

你遇到的重叠问题本质是CSS层叠上下文的规则导致的：元素设置transform属性后会自动创建新的层叠上下文，你当前的固定定位头部没有显式设置z-index，下方带transform的元素层叠等级更高，就会出现滚动后覆盖导航栏的情况。

解决方案 #

只需给Head组件最外层的固定定位容器添加一个足够高的z-index即可，完全不需要删除原有过渡、变换效果，修改代码如下：
找到Head组件返回的最外层div，原有className为：

<div className="fixed w-screen bg-gradient-to-b from-l2_blue to-dark_blue">

添加Tailwind的z-50类（如果你的项目有自定义更高层级的z-index需求，也可以用更大的数值，只要比页面其他普通元素的层级高即可），修改后为：

<div className="fixed w-screen bg-gradient-to-b from-l2_blue to-dark_blue z-50">

补充说明 #

修改后固定导航栏的层级会全局高于其他普通元素，哪怕下方元素带有transform、transition属性也不会覆盖导航栏，原有交互动画效果完全不受影响。如果你的项目后续有弹出层、模态框这类需要高于导航栏的元素，给这类元素设置比z-50更高的z-index（比如z-100）即可。

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