html - 如何实现z-index和overflow

Question

我正在尝试显示当用户将光标悬停在 div 上时出现的“弹出”窗口。一切正常，除了我向我的 div 添加了一个滚动条。显示滚动条的 CSS 代码类似于:

.scroll-menu {
   max-height: 100px;
   overflow-x: hidden;
   overflow-y: scroll;
}

这是包含 .scroll-menu 类之前的图像，

这是包含 CSS 类后的图像。

我找到了这篇文章，其中作者说了为什么在我的场景中使用 z-index: http://www.satya-weblog.com/2012/01/css-z-index-not-working.html

现在，我的问题是: 我该如何解决这个问题？ 有什么方法可以使 z-index 和溢出正常工作吗？

Answer 1

这不是 z-index 问题，而是溢出问题。因为您将溢出设置为 hidden 任何视觉上突出其容器的元素，将被部分隐藏 - 就像在您的屏幕截图中一样。您需要做的是将弹出元素移出其容器，即设置为 overflow-x:hidden

的容器

因此，如果您的 HTML 当前看起来像这样:

<div class="scroll-menu">
    .... content ....
    <div class="popup"></div>
</div>

你想把它改成:

<div class="scroll-menu">
    .... content ....
</div>
<div class="popup"></div>