1

我的网站主页上的 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;
}

提前致谢

4

1 回答 1

0

解决方案是从父容器中删除z-index定义，以便子元素与重叠的#wrapper.

去做这个：

  1. z-index从layout.css.has-slider #content-top的第 439行删除
  2. z-index从layout.css.has-slider #header的第 446行删除
  3. 添加z-index: -1;到layout.css.has-slider #featured-wrap的第 469行

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

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

分解解释：

Parent-1 (z-index: 1;)
-> Child (z-index: 999;) | 将出现在 Parent-2 下方，因为 Parent-1 的 z-index 低于 Parent-2

Parent-2 (z-index: 2;)

于 2013-03-25T21:04:06.947 回答