html - 固定的 div 栏即使在 z-indexing 之后也不会出现在顶部

Question

我目前正在为我的网站修改 Xenforo 主题，下载新主题后我的标题栏出现问题。

http://www.ausfifa.com/forums/index.php?forums/head-to-head.2/

如果向下滚动页面，您会注意到某些元素(例如搜索栏、面包屑箭头和迷你头像)出现在我的标题栏上方。

我不确定为什么会发生这种情况，因为我已将标题栏的 z-index 设置为 9999 并且它的位置是固定的(当您在某个点后向下滚动时，javascript 设置 position = fixed)。所有重叠的元素都有低于 9999 的 z 索引。奇怪的是，这在我的旧主题上不是问题，我从来没有修改任何 CSS 来让它开始这样做。

这是包含我的标题的 div:

#header-menu-cont {
font-family: DIN-Cond;
font-size: 15pt;
min-width: 1000px;
float: left;
width: 100%;
height: 52px;
background: #333333;
z-index: 9999;
position: relative;
}

这是与我的标题重叠的迷你头像:

.discussionListItem .posterAvatar .miniMe {
bottom: 1px;
left: 29px;
padding: 0;
position: absolute;
z-index: 10;
}

与标题重叠的搜索栏:

#searchBar {
position: relative;
z-index: 52;
}

我也尝试过为标题栏内的所有元素设置高 z-index，但这没有任何区别。

如果您想了解更多信息，请随时检查我网站中的任何 HTML。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

设置 Z-index 时，您需要在包含元素而不是其中的元素上执行此操作。

在您的例子中，#headerMover div 应用了 z-index:1;。

如果您将其从您的 CSS 中删除或在 #headerMover 上添加更高的 z-index，它会解决您的问题。