Fixed div遮挡更高z-index元素：logo与汉堡菜单为何被隐藏？

你想要实现全屏移动端菜单，仅保留logo和汉堡图标显示，但测试代码中设置了z-index=50的logo和汉堡被z-index=20的菜单遮挡，实际效果中二者完全不可见。

测试代码 #

<div id="container">
  <div class="sticky top-0 bg-red-950 flex justify-between">
    <div class="z50">my page logo</div>
    <div class="z50">my hamburger menu icon</div>
  </div>
  <div class="bg-gray-600">content</div>
</div>
<div class="fixed top-0 bottom-0 left-0 right-0 bg-amber-300 z-20">
  this menu should not hide logo or menu icon as this menu has a z-index of 20,
  but logo and menu have a z-index of 50
</div>

错误原因分析 #

• 类名拼写错误：Tailwind CSS的z-index类名格式是z-{数值}，你写的z50是无效类，导致logo和汉堡的z-index未被正确设置，仍为默认的auto，自然会被设置了z-20的fixed菜单遮挡。
• 堆叠上下文限制：即便修正类名，头部的sticky定位会创建独立的堆叠上下文，内部元素的z-index仅在该上下文内生效。如果头部容器没有设置z-index，它的堆叠层级会低于外部的fixed菜单，内部的logo和汉堡也无法突破这个限制。

修复方案 #

修正类名并给头部容器设置足够高的z-index，确保其堆叠层级覆盖全屏菜单：

<div id="container">
  <!-- 给sticky头部容器添加z-50，提升整个头部的堆叠层级 -->
  <div class="sticky top-0 bg-red-950 flex justify-between z-50">
    <!-- 修正z-index类名为z-50 -->
    <div class="z-50">my page logo</div>
    <div class="z-50">my hamburger menu icon</div>
  </div>
  <div class="bg-gray-600">content</div>
</div>
<div class="fixed top-0 bottom-0 left-0 right-0 bg-amber-300 z-20">
  this menu should not hide logo or menu icon as this menu has a z-index of 20,
  but logo and menu have a z-index of 50
</div>

补充说明 #

• 定位元素（sticky、fixed、absolute、relative）会创建堆叠上下文，内部元素的z-index无法跨越这个上下文影响外部元素。
• 确保需要显示在最上层的元素所在的堆叠上下文z-index值高于其他干扰元素的z-index。

内容的提问来源于stack exchange，提问作者me.at.coding