为什么伪元素必须配合 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 会判定为不可靠点击区。
评论(0)