z-index失效主因是父容器创建了层叠上下文或子元素未设非static定位；需检查opacity、transform等触发属性及position值，并用DevTools验证stacking context。
z-index 在响应式布局中失效，不是因为写错了值，而是它被“关进了一个小盒子”——也就是层叠上下文里，动不了外面的元素。
为什么给 a 标签设 z-index 没用
常见错误是直接给导航链接（比如 .bottomcenterLinks a）加 z-index: 999，但它的父容器 .bottomcenterLinks 没有定位或没建层叠上下文。这时 z-index 不生效，浏览器会把它当 auto 处理。
-
z-index只对position值为relative、absolute、fixed或sticky的元素起作用 - 如果父容器没设
position，子元素即使定位了，其z-index也只在父容器内部有效（而父容器本身可能还在默认层叠顺序里） - 移动端常因
transform或opacity意外触发新层叠上下文，把原本想置顶的按钮“框死”在里面
如何确认某个元素是否建立了层叠上下文
打开 Chrome DevTools → Elements 面板 → 选中目标元素 → 查看 Styles 面板右侧的 “Computed” 页签 → 搜索 stacking context。如果显示 yes，说明它已创建新上下文。
- 触发条件包括：
position+z-index（非auto）、opacitytransform 不为none、filter有值、will-change设为transform等 - 特别注意：
fixed元素天然建立层叠上下文，但它的子元素z-index只能影响这个上下文内部排序 - 若图片用了
transform: scale(1)，哪怕没视觉变化，也会创建新上下文，导致它和导航不在同一层级比大小
z-index 值该设多大才安全
没有全局“最大值”，只有相对高低。关键不是数字本身，而是它在所处层叠上下文中的位置，以及该上下文在整个页面中的层级。
立即学习“前端免费学习笔记（深入）”；
- 固定导航栏建议设
z-index: 100起步，模态框用1000，加载遮罩用2000—— 这些是约定俗成的区间，方便后续扩展 - 避免用
z-index: 999999：一旦某处意外创建更高层叠上下文（比如第三方广告脚本加了transform），照样会被盖住 - 真正起决定作用的是父级层叠上下文的
z-index：比如.bottomcenterLinks设了z-index: 100，那它里面所有子元素，无论设999还是-1，整体都只能和z-index: 99的图片竞争，赢不了z-index: 101的轮播容器
最易被忽略的一点：层叠上下文不可“穿透”。你不能靠调高子元素的 z-index 让它跳出父容器的上下文去压住兄弟容器——必须让父容器自己站得够高，或者确保它们同属一个上下文。
