position属性无效的主因是值不合法或定位上下文缺失：仅static/relative/absolute/fixed/sticky有效；absolute需最近非static祖先，sticky须配top等且父容器可滚动。
position 属性写对了但没效果？先确认值是否合法
CSS 的 position 只有 static、relative、absolute、fixed、sticky 这几个有效值，其他如 center、float 或拼错的 absoulte 都会被浏览器直接忽略，降级为 static —— 也就是“不生效”的真实原因。
常见误操作：
- 在 Flex 或 Grid 容器里给子元素设
position: absolute，却忘了父容器没设position: relative（或非static），导致定位参考点仍是 viewport - 用
position: sticky但没配top/bottom等临界偏移值，它就永远“粘”不起来 - 父元素有
transform、filter或will-change，意外创建了新的层叠上下文或包含块，使absolute子元素的定位参考对象变了
父容器没设 position:relative 就用 absolute？小心定位基准跑偏
position: absolute 的元素会逐层向上找**最近的非 static 定位祖先**作为定位参考。如果所有父级都是默认的 position: static，那最终就相对于初始包含块（通常是视口）定位 —— 表现就是“飞到页面左上角”或“脱离预期布局”。
解决方法很直接：
立即学习“前端免费学习笔记（深入）”；
- 给直接父容器加
position: relative（最常用，无视觉影响） - 或加
position: absolute/fixed/sticky，但需同步调整其自身位置，容易引发嵌套混乱 - 检查中间某层是否被 JS 动态加了
position: static !important，覆盖了你写的样式
用浏览器开发者工具的“Computed”面板，点开 position，看 “Containing block” 显示的是哪个元素，比猜更准。
z-index 不起作用？大概率是层叠上下文断了
z-index 只对 position 值不为 static 的元素生效，但它不是全局排序，而是在**当前层叠上下文内**生效。一旦父容器自己成了新的层叠上下文（比如设置了 opacity: 0.99、transform: translateZ(0)、filter: blur(1px)），子元素的 z-index 就只跟这个父容器比，不再和兄弟容器的子元素竞争。
典型症状：
- 两个
position: absolute元素，一个在 header 下，一个在 modal 下，无论怎么调z-index，modal 总盖不住 header 里的按钮 - 用
position: sticky的导航栏，被后面某个带transform的 banner 盖住
查法：在 Elements 面板里选中元素，看 Styles 侧边栏是否有 “Stacking context” 提示；或者看 Computed 中 z-index 是否显示为 auto（即未生效）。
sticky 定位卡住不动？检查滚动容器和临界值
position: sticky 必须配合 top、bottom、left 或 right 才能触发，且它的行为依赖于**最近的可滚动祖先容器**。如果父容器没溢出、没设 overflow: auto/scroll，或者本身不可滚动（比如高度不够），sticky 就永远不会“粘”。
还要注意：
- sticky 元素不能是表格相关 display（如
table-row），否则无效 - 父容器若设了
transform，可能让 sticky 失效（Chrome 旧版尤其明显） - 某些安卓 WebView 或 iOS Safari 低版本对
sticky支持不稳定，上线前务必真机验证
最简单的验证方式：临时给 sticky 元素加个 background: red 和 top: 0，然后滚动页面，看它是否在到达顶部时“钉住”—— 如果没反应，问题一定出在滚动上下文或兼容性上。
