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 元素提级到 body 下比如用 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-50Tailwind 的预设值z-0 到 z-50往往不够用fixed 元素在移动端 Safari 上抖动或错位iOS Safari 对 fixed 的实现有历史遗留问题键盘弹出、地址栏收起/展开时会触发视口尺寸重算导致 fixed 元素短暂移位甚至消失。这不是 bug是它把「视口」理解为地址栏内容区的动态组合。 Fotor AI Image Generator Fotor 平台的 AI 图片生成器