css - jQueryUI 选项卡出现在所有其他元素之上

Question

我普通的旧 CSS 菜单出现在 jQuery UI 的后面，比如标签！即使包含 div 的 z-index 是正确的。有没有办法解决这个问题？

/* dropdown menu container */
#navigation-1 li ul.navigation-2 {
    margin:0;
    padding: 5px;
    display:none;
    position:absolute;
    top:71px;
    left:-71px;
    border-radius: 4px;
    border: 3px solid #ea453c;
    background:white;
    width: 730px;
    box-shadow: 0 1px 6px #999;
    z-index: 999;
}

Answer 1

是的。尝试探索或实验 css 中的位置，例如：相对、固定、绝对等。

注意：如果您的 div/元素没有相对、固定、绝对等位置，您将无法使用 z-index。：D

Answer 2

我使用 Firebug 更仔细地探索了 CSS，发现 ui-menu 类已经将位置设置为绝对。然后我添加了这个规则：

.ui-menu{
    z-index: 10;                             
}

您可能必须根据情况尝试使用确切的值，但该值使我的菜单项安全地位于选项卡之上。如果您只想将其应用于特定菜单，则可以为菜单的父容器添加更具体的选择器。