如何实现z-index和overflow

问题描述

我试图显示弹出窗口，当用户将光标悬停在 div 上时出现。一切正常工作，除非我添加一个滚动条到我的 div 。显示滚动条的CSS代码如下：

I am trying show "popup" windows that appear when the user hovers the cursor over a div. Everything is working fine, except when I added a scrollbar to my div. The CSS code to show the scrollbar is something like:

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

这里是一个包含 menu class，

Here is an image before including the .scroll-menu class,

这是一个包含CSS类后的图片。

And here is an image after including the CSS class.

我发现这篇文章，作者说，为什么z-index在我的场景：

I found this article where the author says why z-index in my scenario:http://www.satya-weblog.com/2012/01/css-z-index-not-working.html

现在，我的问题是：
我如何解决这个问题？
有任何方法可以获得工作z-index和溢出吗？

Now, my question is: How can I solve this issue? Is there any way to get working z-index and overflow?

推荐答案

，但溢出问题。因为你设置溢出到 hidden 任何元素视觉上伸出它的容器，将部分隐藏，就像你的截图。您需要做的是将您的popup元素移出其容器外，设置为 overflow-x：hidden

This is not a z-index issue, but an overflow issue. Because you set the overflow to hidden any element visually sticking out of it's container, will be partially hidden - like in your screenshot. What you need to do is move your popup element outside of its container, the one that is set to overflow-x:hidden

因此，如果您的HTML目前看起来像这样：

so if your HTML currently looks like this:

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

您要将其更改为：

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

这篇关于如何实现z-index和overflow的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！