点击不到浮动元素？其实是层叠上下文没对齐
浮动元素本身不创建新的层叠上下文，float 只影响文档流和盒模型位置，不改变 z-index 的生效条件。所以“点击穿透”往往不是浮动本身的问题，而是你期望响应点击的元素被其他元素（比如父容器、兄弟节点或伪元素）视觉遮挡却未参与层叠排序。
为什么加 position: relative 有时能“修复”点击问题
给浮动元素加 position: relative 的本质作用是让它成为层叠上下文的“参与方”——哪怕没设 z-index，它也会在层叠顺序中获得一个确定的位置（属于“层叠等级 6：具有 position 且 z-index:auto 的定位元素”）。这比纯浮动元素（属于“层叠等级 5：浮动元素”）更靠前，尤其当它和同级的 position: static 元素并存时。
- 只加
position: relative不设z-index，层级提升有限，仅对同级静态内容有效 - 若父容器有
overflow: hidden或transform，它可能已创建了新层叠上下文，此时子元素的z-index是相对于该父容器计算的，不是全局 -
position: relative+z-index: 1才真正可控；但注意，z-index对非定位元素无效，所以float元素必须先定位才能用z-index
更可靠的点击区域保障方案
依赖 position: relative 治标不治本。真实项目里，点击失效常源于结构或渲染逻辑问题：
- 检查是否被
::before/::after伪元素覆盖，它们默认也在浮动元素之上，且可能透明但拦截事件 - 确认浮动元素没有被父容器的
clip-path、mask或opacity: 0.99（触发新层叠上下文）意外降级 - 移动端要注意
touch-action是否被设为none或pan-x，导致click事件被系统吞掉 - 如果用
float做布局，优先考虑改用display: flex或display: grid—— 它们天然不脱离文档流，事件捕获更可预测
验证点击是否真被穿透的快速方法
别猜，直接用 DevTools 的「Rendering」面板勾选 Show layer borders 和 Paint flashing，再点一下目标区域：
立即学习“前端免费学习笔记（深入）”；
- 看到红色闪动但没触发回调？说明事件到了，是 JS 逻辑问题
- 完全没反应，且目标元素在 Layers 面板里层级明显低于邻居？说明层叠顺序被父级上下文锁死了
- 元素边框没被高亮，但鼠标悬停样式正常？可能是
pointer-events: none继承自某层祖先 - 用
getBoundingClientRect()打印坐标，确认你点的位置确实落在该元素的boundingClientRect范围内
浮动本身不会让点击“消失”，只是它太容易和层叠、渲染、事件捕获这些隐式机制缠在一起。越想靠一个 CSS 属性“修好”，越容易漏掉真正卡住的地方。
