为啥下拉菜单隐藏在jQuery按钮后面？

Posted 2023-03-06

【中文标题】为啥下拉菜单隐藏在jQuery按钮后面？

【英文标题】：Why is the drop down menu hiding behind jQuery button?为什么下拉菜单隐藏在jQuery按钮后面？

【发布时间】：2012-09-24 16:46:46

【问题描述】：

为什么菜单下拉隐藏在jQuery按钮后面？

div.menu ul li a, div.menu ul li a:visited

    background-color: #465c71;
    border: 1px #4e667d solid;
    color: #dde4ec;
    display: block;
    line-height: 1.35em;
    padding: 4px 20px;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    z-index: 9999;

【问题讨论】：

Code Please.. 还要首先检查按钮的 z-index.. 如果它的'> 9999 那么显然它会隐藏

不确定你的 html 但你可以试试div.menu z-index: 9999;

【参考方案1】：

我也遇到过这个问题。我找到了原因和解决办法。

原因：按钮是在菜单之后渲染的，但是它被jquery-ui 包裹了一些额外的元素，因此它的z-index 增加了。

解决方案：为了解决这个问题，我们可以增加菜单的z-index（比减少许多按钮的z-index更好）。但请记住

“z-index 仅适用于定位元素（position:absolute、position:relative 或 position:fixed）”

所以我们还需要定位我们的菜单。这是我的代码：

<div style="position:relative;z-index:99"> MENU HERE </div>

【讨论】：

谢谢韩。这是正确的解决方案...必须定位。

【参考方案2】：

我有一个 jquery 组合框插件，如果父 div 不够大，它不会显示完整的下拉列表。经过大量研究并弄乱了 z-index 和其他东西后，我发现我需要将父 div 溢出更改为“可见”。如果您遇到同样的问题，也许这会对某人有所帮助。

【参考方案3】：

您可能想要检查您的列表的 z-index 是否高于您的按钮，像这样

div.menu ul li 
 z-index:999;


.yourbutton 
 z-index: 1;

但请粘贴您的 html 代码供我们查看。

【讨论】：

按钮：$('#button').button().css("z-index", "1");没有帮助。

您能否粘贴您的 HTML 代码，我们可以更好地了解情况。

$('#button').css("z-index", "1").button();试试这个，我不确定 .button() 是如何工作的，但它可能会创建一个需要 z-index 的容器。或者尝试找到按钮的父容器并将其分配给 z-index

这一定与jQuery UI按钮有关！！如果删除 .button()，菜单就可以正常工作，像它应该的那样覆盖按钮。 :(

尝试将“div.menu”和“div.menu ul”也设置为 z-index 999

【参考方案4】：

也试试这个

div.menu 


   z-index : 9999;

似乎您只是将活动 li 设置为 z-index.. 不活跃的人会发生什么

【讨论】：

检查按钮的 z-index 是多少？？