css - 主页导航上的 Z-index

Question

我的网站主页上的 z-index 设置有问题。它正在切断较长的下拉子菜单。它只在主页上执行此操作。 z-index 设置为 9999。这个主题被称为 Woo Themes 的 Scrollider。该网站的网址是 www.kuhnflyfish.com。我尝试在 Chrome 的开发人员工具中为很多东西添加 z-index 属性。如果您在主页上向下滚动一点点，使内容包装器位于导航下方，您可以更容易地看到问题。我什至尝试过给内容包装器一个负的 z-index 值，但这没有用。任何建议将不胜感激。以下是未经编辑的 CSS。

ul.nav ul {
  width: 11.089em;
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 9999 !important;
  margin: 0;
}

提前致谢

Answer 1

解决方案是从父容器中删除 z-index 定义，以便子元素与重叠的 #wrapper 处于相同的堆栈上下文中。

为此:

1. 从 .has-slider #content-top 中的 layout.css 的 line 439 移除 z-index >
2. 从 .has-slider #header 中的 layout.css 中 line 446 移除 z-index/li>
3. 在 layout 的 line 469 上将 z-index: -1; 添加到 .has-slider #featured-wrap。 CSS

这将允许 .sub-menu 元素堆叠在 #wrapper 容器之上，因为它们现在都在同一个堆叠上下文中。

请记住，在父级上设置 z-index 将设置一个新的堆叠上下文。此父级中的子级不能出现在父级的任何包含比初始父级更高的 z-index 值的 sibling 之上。

---

分解解释:

Parent-1 (z-index: 1;)
-> child (z-index: 999;) |会出现在 Parent-2 下面，因为 Parent-1 的 z-index 比 Parent-2 低

Parent-2 (z-index: 2;)