jQuery滑块后面出现CSS下拉菜单的Z-index问题答案

【问题标题】：Z-index issue with CSS dropdown menu appearing behind jQuery sliderjQuery滑块后面出现CSS下拉菜单的Z-index问题
【发布时间】：2013-09-10 15:12:09
【问题描述】：

我已经搞砸了 z-index，直到我现在在这个问题上脸色发青。

这无疑会很简单。

请查看this website 并将鼠标悬停在导航菜单中的“为什么选择我们”上。下拉菜单出现在滑块后面。我确定这一定只是 z-index / position 问题，但我没有设法找出问题所在。

（未发布 jsFiddle 或代码，因为想象一下直接在浏览器/网站上识别问题会更快）。

【问题讨论】：

标签： css z-index

【解决方案1】：

你可以单独使用 z-index 解决它（加上修复溢出，所以我猜不是真的单独）。

header.container {
    overflow: visible;
    z-index: 2;
}
#page.container {
    overflow: visible;
    z-index: 1;
}

【讨论】：

在我的情况下，溢出隐藏了。
它是... 2 年前。这就是为什么在小提琴中重现问题很方便。
overflow: hidden on parent 也可以打破孩子的z-index，即使孩子有overflow: visible

【解决方案2】：

有两个问题。这就是诀窍：

nav.container {
    overflow: visible;
    z-index: 1000;
}

z-index 并不能单独解决它，因为子菜单被<nav>-元素的隐藏溢出切断了。

【讨论】：

【解决方案3】：

别忘了添加

  header.container {
    overflow: visible;
    z-index: 2;
    position: relative // without this sometime z-index doesnt work 
}

【讨论】：