奇怪的 CSS / z-index 行为

Question

我费了好大劲才弄清楚为什么此页面上的某些元素在 'punching through' 层之上。

我已经尝试使用开发人员工具进行一系列调整（定位、浮动、z-index、不透明度等），但无法找出导致此问题的原因。

最小测试用例在这里：http://jsfiddle.net/qae1wx0v/3/

具体问题是：

主标题右侧的下拉菜单是 'punching through'（位于上方）堆叠顺序中的主下拉菜单。
面包屑分隔符（::after 伪元素）在堆叠顺序中似乎也位于主下拉菜单上方。

您可以通过将鼠标悬停在主下拉菜单上并注意页面下方出现'through'（即位于主菜单上方）的那些元素来看到这一点。

非常感谢任何确保主下拉导航出现在页面下方元素上方的解决方案。提前致谢！

更新：修复最终变得非常简单（我遇到了开发工具问题）...

.sticky-container {
  z-index: 1;
}

谢谢 Ahmad Salameh！

SEO 关键词 如果其他人遇到类似问题，这与 Zurb Foundation 框架（我之前没有提到过）、粘性元素、它们的下拉菜单以及堆叠顺序之间的相互作用有关。

Answer 1

我看过你的页面，这个问题很容易解决 div :

<div data-sticky-container="" class="sticky-container" style="height: 152.5px;">

将 z-index 设置为 1;

希望我能理解你，如果不明白，请在上面包含你的代码。

Answer 2

好吧，我在这里闭着眼睛拍摄，因为我什么都看不到（我只看到登录），但我对 z-index 的所有问题都归结为竞争堆叠上下文。

这也许最好用一个简单的例子来解释。考虑这个 HTML:

<div class="parent">
    <div class="child-1">
        <div class="grandchild-1"></div>
    </div>
    <div class="child-2">
        <div class="grandchild-2"></div>
    </div>
</div>

现在，假设您希望 grandchild 元素一个接一个地显示。如果你给 grandchild-1 a z-index of 10 and grandchild-2 and z-index of 11, grandchild-2 显示在顶部，右边？

没错，除非 child-1 的 z-index 高于 child-2。如果 child-1 的 z-index 是 10 而 child-2 的 z-index 是 9，则 child-2 的所有元素都将位于 child- 1 个。

这是因为每次为元素分配绝对或相对显示值时（无论是否设置 z-index），实际上都会创建 two新的堆积指数；一个给它的 children，一个给它和它的兄弟姐妹。所有堆叠指数都是从 DOM 树的根部向上（或自上而下，取决于您的大脑工作方式）计算的。

请记住，如果没有显示绝对值或相对值，z-index 无效。

Answer 3

这真的很容易解决伙计，永远不要使用 pooptstrap

现在好了，要修复 poopstrap 创建的 html 和 css 的所有令人厌恶和不必要的嵌套混乱，请将此代码粘贴到 HTML[=11 的最底部=]

<style media="screen">
  .sticky-container{
    z-index: 100;  }
    .is-dropdown-submenu-parent{
      z-index: 1;
    }
</style>

奇怪的 CSS / z-index 行为

Strange CSS / z-index behaviour

html

css

z-index

zurb-foundation