Question

我的网站主页上的z-index设置有问题。它正在切断较长的下拉子菜单。它只在主页上执行此操作。 z-index设置为9999.这个主题在Woo主题中称为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位于相同的堆叠上下文中。

要做到这一点：

从 layout.css

第439行

z-index

.has-slider #content-top

从 layout.css

第446行

z-index

.has-slider #header

在 layout.css

第469行

z-index: -1;

.has-slider #featured-wrap

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

请记住，在父级上设置z-index将设置新的堆叠上下文。此父级中的子级不能出现在父级兄弟姐妹的任何父级兄弟姐妹之上，而父级的兄弟姐妹的父级值与初始父级相比更高。{/ p>

细分解释：

Parent-1（z-index：1;）
- ＆GT;孩子（z-index：999;）|将出现在Parent-2下面，因为Parent-1的z-index低于Parent-2

Parent-2（z-index：2;）

主页导航的Z-index

1 个答案: