z-index不生效主因是元素未定位或父级创建了层叠上下文：需确保按钮及最近有意义父容器均设position（relative/absolute/fixed/sticky），并排查transform/opacit/filter等触发新上下文的属性。
z-index 不生效，99% 是因为没定位或父级悄悄创建了层叠上下文——不是数值不够大，而是根本不在同一个“比大小”的世界里。
按钮加了 z-index 还是被盖住？先查 position
浏览器只认 position: relative、absolute、fixed 或 sticky 的元素才响应 z-index。默认的 position: static 下，写 z-index: 9999 完全被忽略，DOM 顺序说了算。
- 用开发者工具选中按钮，看 computed 样式里的
position是否为非static - 如果按钮本身有
position，但父容器仍是static，它的z-index只在父容器内部有效，对外“出不去” - 最稳妥做法：给按钮加
position: relative，同时确保它最近一个有意义的父容器也设了position: relative
transform、opacity、filter 让 z-index 失效？它们在偷偷建“小房间”
只要某个祖先元素用了 transform（哪怕只是 transform: translateZ(0)）、opacity: 0.99、filter: blur(1px) 或 will-change，就会强制创建新的层叠上下文。按钮和遮挡元素一旦分属不同“房间”，再大的 z-index 也跨不了墙。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 检查遮挡元素和按钮的共同父级，看是否有上述属性；用开发者工具的“Computed”面板逐层往上翻
- 临时移除可疑样式，确认是否恢复；若必须保留，就把按钮提到该父级外面，或让那个父级自己参与层级竞争（加
position: relative; z-index: 1） - 特别注意 Vue/React 中用
v-if或useState控制显隐的弹窗——别把z-index写在条件渲染的子节点上，得写在外层容器上
伪元素、背景图、iframe 遮住按钮？它们不走常规 z-index 路线
伪元素（::before/::after）、background-image 和 iframe 都不参与标准层叠上下文排序，容易“悄无声息”盖住按钮。
-
background-image永远在子元素背后，再高的z-index也压不住；想让它被盖，得换成<img>标签，并和按钮共用一个已定位的父容器 - 伪元素默认渲染在最顶层，哪怕没设
z-index；给它加position: absolute和z-index: 0才能“拉下来” -
iframe自带独立堆叠上下文，父级z-index对它完全无效；修复关键：确保它的直接父容器有position+ 合理z-index，且不能带transform等触发新上下文的属性
点不动按钮？可能根本不是层级问题，而是 pointer-events 被截胡
视觉上按钮明明在最前，却点不了，大概率是事件被上层透明元素或全局设置拦住了。
- 检查按钮自身和所有父级的
pointer-events计算值，确认不是none；尤其警惕html或body上的全局pointer-events: none - 执行
document.elementFromPoint(x, y)（x/y 填按钮中心坐标），返回的节点才是真正在接收点击的那个 - 临时加
outline: 2px solid red确认是“看不见”还是“点不中”；空<div> 或未设 <code>z-index的伪元素，照样挡点击真正卡住的往往不是数值填多少，而是搞不清谁跟谁在比、谁把比的范围悄悄切小了。每次调
z-index前，先花十秒看 computed 样式里的position和最近的层叠上下文边界——这比盲目堆数字快得多。
