z-index不生效主因是元素未定位或被父层叠上下文隔离；需确认position非static，并逐级检查opacity
z-index 不生效？先查 position 和层叠上下文
直接写 z-index: 999 却压不住隔壁元素，八成是忘了设 position。z-index 对 position: static（默认值）完全无效，浏览器会直接忽略它。
必须显式设置 position 为 relative、absolute、fixed 或 sticky 才能激活 z-index：
-
position: relative最常用：不脱离文档流，适合微调按钮层级而不破坏布局 -
position: absolute要小心父容器是否已定位——若父级仍是static，按钮会相对视口定位，可能“飘走” - 哪怕只加了
transform: translateX(1px)或opacity: 0.99，父容器就悄悄创建了新层叠上下文，子按钮的z-index只在内部比大小，再大也盖不过外面z-index: 1的弹窗 - 临时排查可用 DevTools 的「Layers」面板，或运行
getComputedStyle(el).willChange看是否触发了上下文
点击时动态置顶按钮，别只改 z-index
点击按钮 A 想让它浮到最前，仅靠 JS 改 z-index 常失效——尤其当按钮本身或祖先有 transform 或 opacity，z-index 只在局部上下文中起作用。
更可靠的做法：
- 给被点击按钮加一个高优先级 class（如
.active-top），其样式含position: relative; z-index: 1000; - 确保该 class 的选择器权重足够覆盖原有规则（比如用
button.active-top而非仅.active-top） - 若按钮已处于某个层叠上下文中，需同时提升其父容器的
z-index，而非只动按钮自身 - 移动端 Safari 对频繁修改
z-index敏感，建议配合will-change: auto重置以避免渲染异常
Flex/Grid 改顺序 ≠ 改层级
把按钮用 display: flex + order 调前后，或用 Grid 的 grid-row 换位置，这只是改变渲染顺序，不影响 z-index 比较逻辑。
两个按钮即使视觉上一前一后，若没设定位和 z-index，它们仍按 DOM 顺序自然堆叠（后出现的覆盖先出现的）：
-
order会改变键盘 Tab 顺序和屏幕阅读器读取顺序，若按钮功能有逻辑依赖，不能仅靠视觉调整 - 想让“视觉靠前”的按钮真能盖住别的元素，仍需单独设
position+z-index - Flex/Grid 的
order和grid-row不替代z-index，只是布局手段
按钮语义与禁用状态影响视觉层级感知
视觉层级不是靠“加阴影”或“调高饱和度”就能解决的，而是由语义、状态反馈、空间关系和可访问性共同决定。
type 属性直接影响浏览器对按钮的隐含权重：
-
type="submit"在部分 UA 样式中默认带轻微加粗或更重的 box-shadow，天然获得更高视觉优先级；主操作（如“确认付款”）必须用它 -
type="button"更“中性”，适合次要操作（如“取消”），配合线框或浅灰背景，避免与主按钮竞争焦点 - 未声明
type时某些浏览器默认为submit，可能导致视觉上是次级按钮，行为上却触发提交 -
button:disabled { opacity: 0.4; }是常见错误——它既不阻止键盘聚焦，也不告诉屏幕阅读器“这个不可用”。必须同步设置disabled属性和aria-disabled="true"，禁用样式应包含低透明度 + 灰阶背景色 +cursor: not-allowed
真正决定按钮谁压谁的，从来不是写了多大的数字，而是它在哪一层叠上——而这一层叠，又由语义、定位、上下文三者共同锚定。稍有遗漏，视觉和行为就会脱节。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
