根本问题是悬浮层在层叠顺序中压住文本导致鼠标事件被拦截；需检查user-select、pointer-events、层叠上下文及z-index前提条件，并验证伪元素与动画干扰。
悬浮层盖住文本导致无法选中
根本问题不是“不能选”，而是悬浮层在层叠顺序中压住了下方文本，鼠标事件被拦截。浏览器把点击和拖拽操作分配给了上层元素，底层文字根本收不到事件。常见于 position: fixed 或 position: absolute 的遮罩、弹窗、工具栏等场景。
- 用 DevTools 选中文本容器，看右侧
Computed面板里user-select是否为none—— 如果是，先改回text - 检查悬浮层是否设置了
pointer-events: none：它会让鼠标穿透，但也会禁用所有交互（包括 hover 和 focus），且不解决选区断裂 - 更隐蔽的是：悬浮层父容器有
transform、opacity: 0.99或will-change，会创建新层叠上下文，导致其内部 z-index 失效，文本实际被“锁”在错误层级
z-index 设置无效的典型原因
z-index 不生效，往往是因为没满足前提条件。它只对已定位元素起作用，且受祖先层叠上下文限制。
- 给悬浮层加
position: relative或position: absolute后再设z-index，否则声明被忽略 - 如果悬浮层和文本容器同属一个父级，但该父级有
isolation: isolate或transform: translateZ(0)，它们就被隔离在各自层叠上下文中，z-index互不干扰 - 文本容器本身未设
position，默认z-index: auto，即使悬浮层z-index: 1，也可能因渲染顺序覆盖文本 - 临时加
position: relative; z-index: 2到文本包裹容器（如<p></p>或<div class="content">），比调悬浮层更直接有效 <h3>移动端 Safari 文本选中偏移或滞后</h3> <p>iOS Safari 在快速滚动或缩放后，对浮动+绝对定位混排的层叠渲染存在延迟，表现为拖拽选区跳变、光标位置错位、部分字无法框入。</p> <ul> <li>不要在悬浮层上用 <code>backface-visibility: hidden—— 它曾用于防闪烁，但现在会加剧层叠异常 - 给文本容器显式加
-webkit-user-select: text，哪怕它是默认值，也能重置某些渲染状态 - 避免悬浮层使用
env(safe-area-inset-bottom)动态计算bottom同时又叠加transform，二者组合在 Safari 中易触发重绘紊乱 - 若悬浮层是固定定位，且页面可滚动，建议改用
position: sticky+top: auto; bottom: 24px，多数现代浏览器下更稳定
修复后仍断续选中的隐藏因素
即使层级和定位都正确，文本选中仍可能中断——这时问题常出在伪元素或 CSS 动画干扰上。
- 检查文本容器是否用了
::before或::after，且content值为空或为""：这类伪元素虽不可见，但占据盒模型空间，可能分割选区 - 悬停动画若含
transform或opacity变化，会频繁触发新层叠上下文，导致选中过程中层级重排 - 某些 UI 框架（如 Ant Design、Element Plus）会在悬浮层内注入带
pointer-events: none的蒙层，需检查 DOM 结构中是否有意外插入的空<div> <li>最稳妥的验证方式：临时移除悬浮层 HTML 片段，确认文本能否正常连续选中；再逐行恢复，定位干扰源</li> </div>
