具有较高 z-index 的元素仍位于具有较低 z-index 的元素下方

Question

具有较高 z-index 的元素仍位于具有较低 z-index 的元素下方

6

我使用名为Maxi Menu的Joomla菜单模块遇到了一个愚蠢的问题。以下是屏幕截图：

链接到网站
问题似乎是由于z-index引起的。我已经使用firebug进行检查，但还没找出下方菜单如何显示在顶部。
有趣的事实是，当鼠标悬停在菜单项上时，其z-index会被改变为比页面上任何其他菜单项高15000。
那它为什么还会在具有12000和类似z-indices的其他菜单项下面呢？
Firbug显示的z-indices如下：
enter image description here

- Starx

我看到很多在position:relative上使用z-index，但是z-index只能在position:absolute上起作用。 - ndesign11

@MattCharlton，是的，但悬停元素是绝对定位且z-index为15000。其他元素如何能够顶过它呢？ - Starx

实际上它将15000添加到两个变量中，因为它们都被引用为level1。 - ndesign11

@MattCharlton，我明白你的意思了，我看到每次只有一个元素将其z-index更改为15000。请查看我的更新。 - Starx

2个回答

3

您需要在父级ul元素中添加更高的z-index，因此如果您有：

<ul class="menu banner_menu maximenuck" style="">
 <li class="maximenuck item184 parent first level1 " style="z-index : 12000;......

如果出现问题，那么这将解决它

.menu.banner_menu.maximenuck {
 z-index: 15000;
}

enter image description here

- JFK

哦，不错。您能解释一下为什么父元素必须具有比其子元素更高的z-index吗？ - Starx

@Starx: 长篇解释...你可以在这里阅读更多(http://www.impressivewebs.com/a-detailed-look-at-the-z-index-css-property/)，基本上

...一个z-index值为100的元素会出现在z-index值为1的元素下方，如果前者被定位父元素包含，而后者没有。

- JFK

你提供的文章非常好。根据它的内容，下一个答案是正确的。因此我会接受那个答案，并给你点赞。 - Starx

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rik · Accepted Answer

将z-index为10和20的两个div添加position:relative样式。

z-index是相对于第一个具有非静态定位（绝对定位、相对定位、固定定位）的父级元素进行计算的。