根本原因是上层元素（如伪元素、fixed导航栏）z-index过高覆盖文本，使浏览器判定操作发生在非文本元素上；需用开发者工具检查遮挡层、堆叠上下文及pointer-events等设置。
文字被遮挡导致无法选中
根本原因是上层元素（比如伪元素、蒙版层、fixed定位的导航栏）的 z-index 值过高，盖住了文本内容，浏览器判定点击/拖拽发生在非文本元素上，自然没法触发选中。不是浏览器 bug，是层级逻辑生效了。
- 用浏览器开发者工具检查文字所在元素，看它是否被
::before或::after伪元素覆盖（常见于图标按钮、装饰性边框） - 确认父容器是否设置了
position: relative或更高层级的z-index，意外抬升了整个子树的堆叠上下文 - 如果文字在
position: fixed或position: sticky容器里，注意该容器本身是否无意中成了新堆叠上下文的根
z-index 不生效？先确认是否创建了新堆叠上下文
z-index 只对定位元素（position 为 relative、absolute、fixed、sticky）有效，且它的作用范围受限于最近的「堆叠上下文」。父元素一旦有 transform、opacity、filter、will-change 等属性，就会隐式创建新上下文，子元素的 z-index 只在该上下文内比较。
- 检查文字父容器是否带
transform: translateZ(0)或opacity: 0.99—— 这类写法常被用来“强制硬件加速”，但会切断与外部z-index的关联 - 避免在文字容器上直接设
z-index，优先调整遮挡层的z-index：让它明确低于文字所在层（比如设为1，文字层保持默认auto） - 若必须用
transform，改用translateX/Y替代translateZ；或把文字单独抽成兄弟节点，脱离那个堆叠上下文
伪元素遮挡文字的典型修复
很多 UI 框架或自定义样式会给按钮、卡片加 ::after 伪元素做阴影、渐变边框，一旦没控制好尺寸和 z-index，就容易盖住内部文字。
- 给伪元素显式设置
z-index: -1（前提是其父元素已设position: relative） - 更稳妥的做法是加
pointer-events: none到伪元素上——它不参与鼠标事件，但保留视觉效果 - 如果伪元素需要响应点击（比如整个卡片可点），那就不能用
pointer-events: none，得改用clip-path或负margin缩小其实际渲染区域，避开文字位置
移动端 Safari 的特殊表现
iOS Safari 对 z-index 和文本选中的组合处理更敏感，尤其在 body 有 overflow: hidden 或页面存在 touch-action: manipulation 时，偶尔会完全禁用长按选中，哪怕层级没问题。
- 在目标文字容器上加
-webkit-user-select: text，强制开启选中（注意同时设user-select: text保证兼容） - 避免给
html或body设touch-action: none；如需禁用双指缩放，用maximum-scale=1的<meta>更安全 - 如果用了
position: sticky头部，确保它没有z-index值，或至少比正文文字低；Safari 中 sticky 元素容易意外提升堆叠层级
真正难调的不是 z-index 数值本身，而是堆叠上下文的嵌套关系——它看不见、不报错，只在你拖不动文字时默默生效。每次改完记得清掉浏览器缓存再测试，某些旧版 Safari 会缓存层叠状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
