fixed元素被遮挡的根本原因是父级触发新堆叠上下文，使其无法突破层级边界；z-index仅在同上下文中生效；移动端safari存在视口动态变化导致错位问题。
fixed元素不随滚动消失，但被其他元素遮挡
这是最常遇到的问题：position: fixed 确实让元素脱离文档流、固定在视口，但它默认的堆叠上下文（stacking context）层级可能低于父容器或兄弟元素。关键不是它“没固定”，而是它被盖住了。
根本原因：父级设置了 transform、opacity、filter 或 will-change 等属性，意外创建了新的堆叠上下文，把子元素（包括 fixed 元素）锁死在该上下文内——哪怕它自己是 fixed，也只相对于这个新上下文定位，且无法突破其层级边界。
- 检查父容器是否用了
transform: translateZ(0)、filter: blur(1px)或opacity: 0.99，这些都会触发新堆叠上下文 - 把
fixed元素提级到下（比如用 React 的createPortal或 Vue 的Teleport）是最稳妥的解法 - 若必须保留在原 DOM 位置，可尝试给父级加
isolation: isolate，强制其不创建隔离的堆叠上下文（兼容性注意：IE 不支持）
z-index 失效，或数值再大也没用
z-index 只在同一个堆叠上下文中生效。你给 .header { position: fixed; z-index: 9999; }，但如果它的父容器本身 z-index: 10 且已形成堆叠上下文，那整个 .header 就被框死在「10 这一层」里，外面的 z-index: 9999 形同虚设。
Tailwind 默认的 z- 工具类（如 z-50、z-[100]）只是写死 z-index 值，不解决上下文问题。
- 先确认目标元素是否处于顶层堆叠上下文——用浏览器开发者工具的「Layers」面板（Chrome）或「3D View」（Firefox）看渲染层结构
- 避免嵌套多层
relative+z-index，尤其不要在fixed元素外层套relative z-10 - 需要精细控制时，直接用
z-[9999]而非z-50，Tailwind 的预设值（z-0到z-50）往往不够用
fixed 元素在移动端 Safari 上抖动或错位
iOS Safari 对 fixed 的实现有历史遗留问题：键盘弹出、地址栏收起/展开时，会触发视口尺寸重算，导致 fixed 元素短暂移位甚至消失。这不是 bug，是它把「视口」理解为地址栏+内容区的动态组合。
常见现象：输入框聚焦后，fixed 的底部操作栏上移、卡在半空、或完全不见。
- 避免用
bottom: 0+fixed做底部栏；改用inset-x-0 bottom-0并配合min-height: 100vh的容器做“伪固定” - 监听
resize事件，检测window.visualViewport?.height变化，在键盘弹出时临时切为position: absolute+ 动态计算bottom - 加
viewport-fit=cover并配合env(safe-area-inset-bottom)适配刘海屏，例如：padding-bottom: env(safe-area-inset-bottom)
如何让 fixed 导航栏避开移动端地址栏
桌面端没问题，但移动端 Chrome / Edge 在页面滚动时会隐藏地址栏，fixed top-0 的导航会被“顶上去”，造成顶部留白或内容被遮挡。这不是 Tailwind 的问题，是 CSS fixed 与浏览器 UI 行为的冲突。
本质是：浏览器认为地址栏属于视口一部分，而 fixed 是相对于视口定位的，地址栏收缩 → 视口变高 → top: 0 位置实际下移。
- 用
inset-0替代top-0 left-0 right-0，并加will-change: transform提升图层，部分缓解重绘延迟 - 更可靠的做法：放弃纯 CSS 固定，改用 JS 监听
scroll，根据document.scrollingElement.scrollTop动态切换fixed和sticky - 如果只是头部导航，
position: sticky; top: 0往往比fixed更稳——它随内容滚动，但不会被地址栏干扰
真正难的从来不是写 fixed 或调 z-index，而是判断当前元素到底处在哪个堆叠上下文里、以及那个上下文是不是由某个看似无关的 opacity 或 backdrop-filter 悄悄创建的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
