当使用 `transform: translatex()` 移动包含下拉菜单的容器时，超出父容器边界的部分在 chrome 中会丢失鼠标悬停与点击事件；根本原因在于 css 变换会创建新的堆叠上下文和剪裁边界，导致事件无法穿透。改用 `left`/`top` 定位可彻底规避该问题。
在构建自定义下拉组件（如带国旗图标的国家选择器）时，开发者常通过 position: absolute 配合 transform 实现视觉位移，但这一做法可能引发一个隐蔽却关键的问题：溢出父容器的子元素无法响应鼠标事件（hover、click），尤其在 Chrome 浏览器中表现明显，而 Firefox 则通常正常工作。
问题根源：transform 触发隐式剪裁
CSS 的 transform 属性（如 translateX(1000px)）不仅改变元素位置，还会强制浏览器为其创建独立的层叠上下文（stacking context） 和 包含块（containing block）。更重要的是，在某些渲染引擎（尤其是 Chromium）中，该变换会隐式启用 overflow: clip 行为 —— 即使父容器未显式设置 overflow，其变换后的几何边界也会成为事件捕获的硬性边界。因此，尽管 .option 子项视觉上“显示”在父容器之外（通过 position: absolute + z-index），其鼠标事件仍被截断。
✅ 正确理解：这不是 pointer-events: none 导致的禁用，而是底层渲染层对事件坐标的裁剪判定失败。
解决方案：用 left/top 替代 transform
由于你的容器已声明 position: absolute，完全可通过标准偏移属性实现相同布局效果，且避免 transform 带来的副作用：
/* ❌ 问题写法 —— 触发隐式剪裁 */
#registerStep4 {
transform: translateX(1000px); /* ← 禁止使用 */
}
/* ✅ 推荐写法 —— 语义清晰，事件正常 */
#registerStep4 {
left: 1000px; /* ✅ 安全替代 transform */
top: 0;
position: absolute;
width: 360px;
height: 100px; /* 示例高度，按需调整 */
user-select: none;
}该修改无需调整 HTML 结构或 JavaScript 逻辑，仅需替换 CSS 定位方式。实测表明，切换后所有溢出的选项项（如
补充优化建议
移除冗余的 overflow 操作：原 JS 中动态修改 formWrapper.style.overflowY/X 并非必需。只要父容器不设 overflow: hidden，且子项使用 position: absolute + 合理 z-index，下拉菜单自然可自由溢出并保持交互。
-
增强可访问性：建议将 onclick 内联事件替换为语义化事件监听，并添加键盘支持（如 Enter/Space 触发选择，ArrowDown 导航）：
document.querySelectorAll('.dropdown .option div').forEach(el => { el.addEventListener('click', () => show(el.textContent.trim())); el.setAttribute('role', 'option'); }); CSS 修正注意点：检查 HTML 中混用的
