当自定义下拉菜单因 `transform: translatex()` 导致子元素溢出父容器时，chrome 中会丢失鼠标事件（hover/click），本文提供根本原因分析与两种可靠解决方案：改用 `left` 定位或移除 transform，确保交互区域完全可用。
在构建自定义下拉组件（如带国旗图标的位置选择器）时，一个常见却容易被忽视的问题是：即使视觉上元素已正确显示在父容器之外，鼠标悬停和点击事件却无法触发。这并非 CSS 或 JavaScript 逻辑错误，而是浏览器渲染层面对 transform 的特殊处理所致。
? 根本原因：transform 创建了新的堆叠上下文与剪裁边界
CSS 中的 transform（包括 translateX, scale, rotate 等）会为元素创建一个新的 包含块（containing block） 和 局部坐标系。更重要的是，在 Chrome（及部分基于 Chromium 的浏览器）中，transform 会隐式启用 “paint clipping” —— 即使父容器设置了 overflow: visible，其内部经 transform 位移的后代元素，若超出原始布局边界，其交互区域（hit-testing area）仍可能被裁剪，导致鼠标事件失效。
你代码中的关键问题就在此行：
#registerStep4 {
position: absolute;
top: 0;
transform: translateX(1000px); /* ❌ 触发事件裁剪 */
height: 100px; /* 高度不足，导致 .option 溢出 */
}
尽管 .option 使用 position: absolute 并设置了 z-index: 1000，且父级 #registerStep4 的 overflow-y 被 JS 动态设为 visible，但 transform 已将整个元素的“事件捕获范围”锁定在其原始布局尺寸内。
✅ 解决方案一：用 left / right 替代 transform（推荐）
由于 #registerStep4 已是 position: absolute，完全可通过 left 属性实现相同位移效果，且不会触发隐式剪裁：
#registerStep4 {
width: 360px;
position: absolute;
top: 0;
left: 1000px; /* ✅ 安全、语义清晰、事件正常 */
user-select: none;
height: 100px; /* 可根据实际需求调整 */
}
✅ 优势：
