fixed元素被遮挡主因是父容器触发层叠上下文，常见于hover:scale-105等类；需用devtools检查堆叠上下文、移出fixed元素至body、避免transform类、注意dom顺序及ios safari限制。
fixed元素被遮挡，大概率是父容器触发了层叠上下文
Tailwind 默认不会主动加 transform、opacity 或 filter，但你写的类名可能悄悄触发了——比如用了 hover:scale-105、group-hover:opacity-90、backdrop-blur-sm，甚至只是 will-change-transform。这些都会让父级变成新的层叠上下文根节点，导致子元素的 fixed 定位被“锁死”在内部，z-index 再大也没用。
常见错误现象：z-index 在开发者工具里显示为 auto；删掉父级一个 opacity-99，遮挡立刻消失；弹窗比导航栏还矮，哪怕它写了 z-50。
- 打开 DevTools → Elements 面板 → 选中被遮挡元素 → 右键 → “Show stacking context”，快速定位哪个祖先建立了新上下文
- 临时禁用父级所有
transform-、opacity-、filter-、backdrop-、will-change-类，观察是否恢复 - 若必须保留动效，把
fixed元素（如.modal）从嵌套结构中移出，用 JS 追加到document.body下
z-index 工具类没生效？确认它作用在定位元素上
Tailwind 的 z-* 类（如 z-50、z-[9999]）只对已定位元素生效。如果你给一个 div 加了 z-50 却没加 fixed、absolute 等，z-index 就是摆设。
另外，Tailwind 的 z-* 是按数值映射的（z-0 → z-index: 0），但真正起作用的是相对大小关系，不是绝对数字。别迷信 z-9999，重点看它是否比遮挡它的元素大。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 确保 fixed 元素同时有
fixed+z-*，例如：fixed top-0 left-0 z-50 - 检查遮挡它的元素是否也用了
z-*，比如框架 UI 库（Headless UI、DaisyUI）可能自带z-10或z-40，你需要设得比它高 - 避免给
fixed元素的直接父容器加z-*（尤其当父容器非static定位时），这反而会限制子元素层级范围
移动端 Safari 中 fixed + Tailwind 类组合容易出问题
iOS Safari（尤其是 15+）对 fixed 元素有特殊渲染逻辑。当你同时用了 fixed 和某些 Tailwind 类（比如 transform、scale-、translate-），再配合页面滚动或软键盘弹出，z-index 可能完全失效——它会被地址栏、输入法面板盖住，且无法靠调大数值修复。
这不是 bug，是 Safari 主动降级渲染层级的结果。实测发现，加 backface-visibility-hidden 或 transform: translateZ(0) 有时反而加重问题。
- 避免在
fixed元素上使用任何transform-类（包括transform-gpu） - 用
scroll-mt-替代硬编码top偏移（如scroll-mt-16配合scroll-behavior: smooth），解决锚点跳转被遮挡 - 底部固定栏慎用
h-screen或min-h-screen，改用min-h-[calc(100vh-60px)]避免视口变化时错位
DOM 位置比 z-index 更底层地影响 fixed 渲染顺序
Tailwind 不控制 HTML 结构，但浏览器对多个 position: fixed 元素的默认堆叠顺序，是由它们在 DOM 中的书写顺序决定的：后出现的 fixed 元素，默认在先出现的上方（前提是同一层叠上下文）。这意味着，即使你给顶部导航写了 z-50，底部栏写了 z-40，但如果底部栏的 HTML 在导航栏之后，它仍可能盖住导航栏。
更隐蔽的是：某些 UI 组件库（比如基于 Portal 的模态框）会动态插入 DOM，但插入位置可能在 body 开头而非末尾，导致它被其他 fixed 元素覆盖。
- 把关键
fixed元素（如.header、.footer）放在 HTML 的
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
