按钮点不了大概率是z-index未生效，因未设置position属性（如relative），导致z-index被忽略；居中与层级需分开处理，前者用flex/margin等布局，后者必须配合定位属性才能启用z-index。
按钮居中后点不了，是不是 z-index 没生效？
大概率是居中用的 margin: 0 auto 或 text-align: center，但按钮本身没设 position，导致 z-index 完全被忽略——浏览器直接当它不存在。
- 居中和层级是两件事：居中靠布局（
flex、margin、text-align），层级靠定位+z-index - 只要没写
position: relative（或absolute/fixed），z-index: 999就是废代码 - 常见现象：居中的按钮在滚动时突然无法点击，或弹窗里的确定按钮被导航栏盖住
Flex 居中容器里，子元素怎么避免被遮挡？
Flex 容器本身不创建层叠上下文，但它的子元素一旦加了 position，就可能意外陷入父级或兄弟元素的层级陷阱。
- 如果父容器用了
transform、filter或opacity: 0.99，它会悄悄创建新层叠上下文，子元素的z-index只能在该容器内比大小 - 不要只给按钮加
z-index: 100，先确认它要“浮”在哪个元素上面——比如导航栏.navbar设了z-index: 10，按钮就得至少11，且两者必须同属一个层叠上下文 - 检查是否有伪元素（如
::before）或动画文字容器没设z-index，它们默认渲染在顶层，容易盖住居中按钮
背景图+居中内容被“吃掉”，是层级问题还是颜色问题？
多数情况不是遮挡，而是视觉欺骗：background-image 本就不会盖住内容，真正出问题的是文字没颜色、子元素 z-index: -1 或父容器透出背景。
-
z-index: -1是高危操作——会让元素沉到父容器背景层之下，连background-image都能盖住它 - 临时验证：给文字加
color: #000 !important，立刻可见说明是颜色/透明度问题，不是遮挡 - 如果居中内容用了
position: relative却看不见，先删掉所有z-index值，再逐个加回来排查
Vue/React 中居中弹窗被遮，为什么加了 z-index 还不管用？
动态组件里，v-if 或 useState 控制显隐时，z-index 很容易写错位置——写在条件渲染的子节点上，等于每次重渲染都重置层级。
- 必须把
z-index和position: fixed写在最外层容器（如.modal-overlay），而不是.modal-content里 - CSS-in-JS 库（如 Emotion、Styled Components）可能自动注入
transform或will-change，无声创建新层叠上下文，需手动覆盖 - 移动端 Safari 对
z-index更敏感，避免用10000这类大数，100足够，关键是逻辑清晰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
