如何实现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>

Answer 2

overflow-x: hidden;

我相信这一行可能会导致您的问题，因为您告诉包含div来截断超出其边界的任何内容。