Html 如何实现z索引和溢出

我正在尝试显示当用户将光标悬停在

div

上时出现的“弹出”窗口。一切正常，除了在我的

div

中添加了滚动条。显示滚动条的CSS代码类似于：

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

这是包含

.滚动菜单

类之前的图像，

这是一个包含CSS类后的图像

我在这篇文章中发现了作者在我的场景中为什么要使用z-index：

现在，我的问题是： 我如何解决这个问题？

---

有没有办法让z索引和溢出正常工作？

这不是z索引问题，而是溢出问题。因为您将溢出设置为

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>

.... 内容。。。。

这不是z索引问题，而是溢出问题。因为您将溢出设置为

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>

.... 内容。。。。

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

---

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

如果可能，请向我们提供fiddle link，我会说删除

overflow-x:hidden如果可能，请为我们提供fiddle linkI，我会说删除
溢出-x:hidden是的，这是一个很好的解决方法。坏消息是（对我来说）我正在使用durandarl/widget来显示这个弹出窗口（我列表中的每个元素都有一个与之相关联的“弹出窗口”小部件。我认为解决我的问题的唯一方法是在我的列表中添加某种分页，然后忘记这个“滚动条”。您的回答非常有用，因为现在我知道我没有任何溢出和z索引的机会。是的，这是一个很好的解决方法。坏消息（对我来说）是我正在使用durandarl/widget来显示这个弹出窗口（我列表中的每个元素都有一个“弹出窗口”）与之相关的小部件。我认为解决我的问题的唯一方法是在我的列表中添加某种分页，并将其忘在这个“滚动条”中。您的答案非常有用，因为现在我知道我没有任何溢出和z索引的机会。设置溢出-y时它不会删除溢出-x。设置溢出-y时它不会删除溢出-x