z-index不生效的根本原因是元素未参与层叠上下文；必须设置position（如relative）才能启用z-index，同时警惕transform、opacity等隐式创建新层叠上下文的属性。
z-index 不生效，基本是因为元素没参与层叠上下文——不是值设小了，是压根没“入场资格”。
动态创建的高亮元素为什么总被盖住？
用 document.createElement("div") 插入的高亮层（比如搜索关键词背景、代码行高亮）默认是 position: static，此时 z-index 完全被忽略。哪怕你写了 el.style.zIndex = "999"，也毫无作用。
- 必须显式设置
el.style.position = "relative"或"absolute"（推荐relative，不破坏文档流） - 避免用
el.setAttribute("style", "...")覆盖已有样式；优先用el.style.position和el.style.zIndex单独赋值 - 若用 CSS 类控制，确保该类同时包含
position和z-index，例如：.highlight { position: relative; z-index: 5; }
高亮层和弹窗/下拉菜单打架怎么调？
常见于搜索框高亮词 + 下拉建议列表共存时：高亮背景突然盖住下拉项，或反过来。这不是 z-index 数值大小问题，而是层叠上下文分裂导致的“不在一个擂台上比武”。
- 检查高亮容器和下拉容器是否有共同父级；若有，该父级最好设
position: relative，避免意外创建隔离上下文 - 警惕父级用了
transform、opacity: 0.99、filter或will-change——这些都会隐式创建新层叠上下文，让子元素的z-index只在内部有效 - 高亮层通常只需视觉强化，建议设
z-index: 1；下拉菜单、弹窗等交互层应设更高（如z-index: 10），且其直接父容器不能是static
文字高亮被 <img alt="HTML动态高亮层级错乱怎么办？遮挡解决技巧" > 或伪元素挡住？别堆 z-index
比如在段落中高亮某几个字，旁边有个 <img class="deco" alt="HTML动态高亮层级错乱怎么办？遮挡解决技巧" > 或 ::before 装饰图标，DOM 顺序靠前就天然拦截鼠标事件——这不是层级高低问题，是事件捕获路径被截断。
- 给遮挡的装饰性元素加
pointer-events: none，高亮文字立刻可交互，且图像/图标仍正常显示 - 该属性不继承，必须直接写在
<img alt="HTML动态高亮层级错乱怎么办？遮挡解决技巧" >或伪元素规则里，例如：.deco { pointer-events: none; }或p::before { pointer-events: none; } - 别试图用
z-index: -1压装饰图：非定位元素上设负值无效，还可能引发父容器裁剪
移动端 Safari 高亮后点不动？补 touch-action
部分 iOS Safari 在高亮文字区域会抑制触摸响应，尤其当高亮层带 transform 或嵌套在 overflow: scroll 容器中时。
立即学习“前端免费学习笔记（深入）”；
- 给高亮元素加
touch-action: manipulation，能明确告诉浏览器“这里要响应点击” - 若高亮区域是内联文本（如
<span class="hl"></span>），还需确保父级块容器没设overflow: hidden且未触发新层叠上下文 - 动态插入高亮时，记得同步设置该样式：
hlEl.style.touchAction = "manipulation"
z-index 写多少，而是搞清哪些父级悄悄建了“小房间”，把你的高亮和按钮关进各自的世界里——查 transform、opacity、filter 比调数字更管用。 
