Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly

Dropdowns Inside Scrollable Containers: Why They Break And How To Fix Them Properly

摘要

下拉菜单在滚动容器中常被裁剪或错位，主要涉及溢出裁剪、堆叠上下文和包含块三个浏览器机制。绝对定位无法逃逸溢出裁剪，z-index在堆叠上下文中失效，包含块导致坐标计算错误。解决方案包括使用Portal将菜单移出滚动容器、固定定位或CSS锚点定位。重构DOM结构也是简单有效的选择。无论采用哪种方法，都需兼顾无障碍体验。