z-index不生效的首要原因是未设置position属性；必须将position设为relative、absolute、fixed或sticky才能激活z-index，且需注意父级层叠上下文对子元素层级的限制。
z-index 不生效？先检查 position 是否设置
直接写 z-index: 999 却压不住隔壁元素？大概率是忘了设 position。z-index 对 position: static（默认值）完全无效，浏览器会直接忽略它。
- 必须显式设置
position为relative、absolute、fixed或sticky才能激活z-index -
position: relative最常用：不脱离文档流，适合微调按钮层级而不破坏布局 - 用
absolute时注意父容器是否已定位——若父级position: static，按钮会相对视口定位，可能飘走
按钮堆叠被“截断”？警惕父级创建的层叠上下文
即使子按钮 z-index: 9999，也可能被外面 z-index: 1 的弹窗盖住。这不是 bug，而是父容器悄悄创建了新的层叠上下文（stacking context），把子元素的层级比较范围锁死在内部。
- 以下任意一条 CSS 都会触发新层叠上下文：
opacity: 0.99、transform: translateX(1px)、filter: blur(1px)、will-change: transform - 动画中加了个
transform就让按钮“消失”在底层？先查父容器有没有上述属性 - 临时调试可用
getComputedStyle(el).willChange或 DevTools 的“Layers”面板确认上下文边界
多个按钮需要动态置顶？别只改 z-index
点击按钮 A 时想让它浮到最前，仅靠 JS 改 z-index 常失效——尤其当按钮本身或祖先有 transform 或 opacity 时，z-index 只在局部上下文中起作用。
- 更可靠的做法：给被点击按钮加一个高优先级 class（如
.active-top），其样式含position: relative; z-index: 1000;，并确保该 class 的选择器权重足够覆盖原有规则 - 若按钮已处于某个层叠上下文中，需同时提升其父容器的
z-index，而非只动按钮自身 - 移动端 Safari 对频繁修改
z-index敏感，建议配合will-change: auto重置以避免渲染异常
用 Flex/Grid 控制视觉顺序 ≠ 控制层级
把按钮用 display: flex + order 调前后，或用 Grid 的 grid-row 换位置，这只是改变渲染顺序，不影响 z-index 比较逻辑。两个按钮即使视觉上一前一后，若没设定位和 z-index，它们仍按 DOM 顺序自然堆叠（后出现的覆盖先出现的）。
- Flex/Grid 的
order和grid-row不替代z-index，只是布局手段 - 想让“视觉靠前”的按钮真能盖住别的元素，仍需单独设
position+z-index - 特别注意：
order会改变键盘 Tab 顺序和屏幕阅读器读取顺序，若按钮功能有逻辑依赖，不能仅靠视觉调整
z-index 不够大。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
