可滚动容器中的下拉菜单：为什么它们会失效以及如何正确修复

Email Newsletter

电子邮件通讯

Weekly tips on front-end & UX.
Trusted by 182,000+ folks.

front-end & UX 的每周技巧。
受 182,000+ 人信赖。

Dropdowns often work perfectly until they’re placed inside a scrollable panel, where they can get clipped, and half the menu disappears behind the container’s edge. Godstime Aburu explains why this happens and offers practical solutions to fix it.

下拉菜单通常运行完美，直到它们被放置在可滚动面板中，在那里它们会被裁剪，菜单的一半会消失在容器的边缘后面。Godstime Aburu 解释了为什么会发生这种情况，并提供了修复它的实用解决方案。

The scenario is almost always the same, which is a data table inside a scrollable container. Every row has an action menu, a small dropdown with some options, like Edit, Duplicate, and Delete. You build it, it seems to work perfectly in isolation, and then someone puts it inside that scrollable div and things fall apart. I’ve seen this exact bug in three different codebases: the container, the stack, and the framework, all different. The bug, though, is totally identical.

这种情况几乎总是相同的，那就是一个数据表格位于可滚动容器内部。每行都有一个操作菜单，一个带有一些选项的小下拉菜单，比如编辑、复制和删除。你构建它，它在孤立环境中似乎完美工作，然后有人把它放到那个可滚动的div里面，一切就崩溃了。我在三个不同的代码库中见过这个确切的 bug：容器、技术栈和框架，全都不同。不过，这个 bug 完全相同。

The dropdown gets clipped at the container’s edge. Or it shows up behind content that should logically be below it. Or it works fine until the user scrolls, and then it drifts. You reach for z-index: 9999. Sometimes it helps, but other times it does absolutely nothing. That inconsistency is the first clue that something deeper is happening.

下拉菜单在容器的边缘被裁剪。或者它出现在逻辑上应该在它下方的内容后面。或者在用户滚动之前它工作正常，然后它漂移。你求助于 z-index: 9999。有时它有帮助，但其他时候它完全不起作用。这种不一致是更深层问题发生的第一个线索。

The reason it keeps coming back is that three separate browser systems are involved, and most developers understand each one on its own but never think about what happens when all three collide: overflow, stacking contexts, and containing blocks.

它反复出现的原因是涉及三个独立的浏览器系统，大多数开发者各自理解它们，但从不考虑三者碰撞时会发生什么：overflow、stacking contexts 和 containing blocks。

Three browser systems: overflow clipping, stacking contexts, and containing blocks. ( Large preview )

三种浏览器系统：溢出裁剪、层叠上下文和包含块。（大图预览）

Onc...