伪元素必须配合position: relative才能准确定位，因为::before的absolute定位依赖最近已定位祖先，若目标元素未设relative，伪元素会向上查找至body等意外容器，导致错位、飘移或失效。
为什么伪元素必须配合 position: relative 才能准确定位
目标元素没设 position: relative，::before 会往上逐层找最近的定位上下文——可能落到 body 或某个意外父容器上，导致热区飘移、错位甚至完全失效。这不是浏览器 bug，是 CSS 定位规范行为。
常见错误现象：::before 扩展区域出现在屏幕左上角、点击无响应、热区只覆盖一半。
- 必须给目标元素（如
button、a、span）显式加position: relative - 不要依赖父容器的
relative——它不保证伪元素相对于你想要的那个元素定位 - 如果目标是
img，它本身不支持伪元素，得在外层包一层div并对其设relative
inset 和四边 top/left/bottom/right 的实际差异在哪
inset: -8px 看起来简洁，但 IE11 完全不支持，Safari ≤14.1 在 flex 子项中解析不稳定；而 top: -8px; right: -8px; bottom: -8px; left: -8px 兼容性更广，且在旧版 Safari 中表现一致。
移动端真机测试时，若热区在 iPhone 上部分失效，优先检查是否用了 inset 而没 fallback。
立即学习“前端免费学习笔记（深入）”；
- 新项目可放心用
inset，但上线前务必在 iOS 15–16、Android Chrome 110+ 实测 - 需兼容 Safari 14 或更低版本时，必须退回四边写法
- 别混用：比如
inset: -8px; top: -4px会导致后者覆盖前者，行为不可控
z-index: -1 不是“随便设个负数”，而是关键安全值
伪元素默认渲染在原元素上方，z-index: -1 的作用不是“让它变低”，而是把它压进原元素的堆叠上下文底层——既保留点击能力，又不遮挡文字、图标或子控件。设 z-index: -999 或 z-index: 0 都可能出问题。
容易踩的坑：z-index: -1 失效，往往因为父容器没创建新堆叠上下文（比如没设 position: relative），或者父容器有 overflow: hidden 把伪元素裁掉了。
- 原元素必须同时有
position: relative和一个明确的z-index（哪怕只是z-index: 1） -
::before设z-index: -1，且不能设background或border（除非透明） - 如果父容器有
overflow: hidden，扩出去的部分会被剪掉，得同步改父容器或换方案
移动端点击失效？先查这三件事
iOS Safari 和部分安卓 WebView 对伪元素热区有隐性拦截逻辑，写法没错但点不中，大概率卡在这三个地方：
-
touch-action: manipulation没加在目标元素上——缺它，系统会延迟 300ms 判断是否双击，热区响应变慢甚至丢事件 -
::before缺pointer-events: auto（虽然默认是 auto，但某些旧版 Safari 会忽略继承，显式声明更稳） - 用了
opacity: 0或visibility: hidden隐藏伪元素——这会让点击直接失效；应改用background: transparent+border: none
最小触控目标建议从 8px 起扩（对应物理像素 44×44pt），尤其在 2x/3x 屏幕下，只扩 4px 实际可能不到 22px，iOS 会判定为不可靠点击区。
