HTML动态高亮层级错乱怎么办？遮挡解决技巧-html教程-PHP中文网

z-index不生效的根本原因是元素未参与层叠上下文；必须设置position（如relative）才能启用z-index，同时警惕transform、opacity等隐式创建新层叠上下文的属性。

html动态高亮层级错乱怎么办？遮挡解决技巧

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

比如在段落中高亮某几个字，旁边有个或 ::before 装饰图标，DOM 顺序靠前就天然拦截鼠标事件——这不是层级高低问题，是事件捕获路径被截断。

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

给遮挡的装饰性元素加 pointer-events: none，高亮文字立刻可交互，且图像/图标仍正常显示
该属性不继承，必须直接写在或伪元素规则里，例如：.deco { pointer-events: none; } 或 p::before { pointer-events: none; }
别试图用 z-index: -1 压装饰图：非定位元素上设负值无效，还可能引发父容器裁剪