Question

我想知道为什么此页面上的某些元素会“穿插”上面的图层。

我已经尝试使用开发人员工具进行一系列调整（定位，浮动，z-index，不透明度等），但无法弄清楚是什么原因造成的。

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

具体问题是：

主标题右侧的下拉菜单按堆叠顺序“穿插”（位于上方）主下拉菜单。
面包屑分隔符（::伪元素之后）似乎也位于堆叠顺序的主下拉菜单上方。

您可以通过将鼠标悬停在主下拉菜单上并注意那些位于页面下方的元素来“遍历”（即坐在主菜单上方）。

任何确保主下拉列表导航都显示在页面下方元素上方的解决方案都非常受人们欢迎。预先谢谢你！

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

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

感谢艾哈迈德·萨拉梅（Ahmad Salameh）！

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

Answer 1

我已经看过您的页面了，这个问题很容易解决：

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

将z-index设置为1;

我希望我能理解您，如果没有，请在上面添加您的代码。

Answer 2

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

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

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

Answer 3

好吧，在这里闭上眼睛进行拍摄是因为我什么都看不到（我看到的只是一个登录信息），但是我与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>

现在，假设您希望将孙子元素显示在另一个之上。如果您给孙子1的z索引设置为10，孙子2的z索引设置为11，孙子2会显示在顶部，对吗？

是的，除非child-1的z-index高于child-2。如果child-1的z-index为10，child-2的z-index为9，则child-2的所有元素都将位于child-1的下面。

这是因为每次给元素分配一个显示值时，无论是绝对值还是相对值（无论是否设置z-index），实际上都是创建两个新的堆栈索引；一个给孩子，另一个给它及其兄弟姐妹。而且所有堆叠索引都是从DOM树的根开始（或从上到下，取决于您的大脑工作方式）计算的。

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

奇怪的CSS / z-index行为

3 个答案: