Z索引不起作用-替代技术或修复 [英] Z-Index Not Working - Alternative Technique or Fix

问题描述

我为固定位置的菜单栏分配了较高的z索引，但它仍显示在我网站上其他元素的下方.有没有我可以使用的替代技术，或者我编写的代码有问题.我有问题的网站是此处(注意:您需要向下滚动才能向上滚动，以显示导航栏).菜单栏显示不正确，显示以下代码

I have assigned a fixed positioned menubar a high z-index, yet it still appears below other elements on my website. Is there an alternative technique I could use or something wrong with the code I have written. My website with the issue is here (note: you need to scroll up after scrolling down for the navbar to appear). The menu bar that is not appearing properly has the following code

#headerfull {
position:absolute;
top:-100px;
left:0;
z-index:10000;
width:100%;
height:100px;
background-color:#000000;
opacity:.7;
display:none;   
}

，但是由于某种原因，z索引不起作用.诸如"NinjaWarrior.info"图像之类的元素位于导航栏的前面和中间，z索引较低.该图像的代码如下

but, for some reason, the z-index does not work. Elements like the "NinjaWarrior.info" image in the front and center, with a lower z-index appears in front of the navbar. The code for that image is below

<img style="position:absolute;z-index:10" src="images/logo_main.png" width="900" height="300" alt="American Ninja Warrior Fan Site">

推荐答案

添加此CSS:

#header {
    position: relative;
    z-index: 10000;
}

z-index 适用于具有相同堆叠上下文的容器.

z-index works on containers with the same stacking context.

在您的代码中， DIV 的 header 和 content 是同级，这是 z-index 要应用的数字.

In your code, the DIVs header and content are siblings, and that's a condition for z-index numbers to apply.

记住此规则的最简单方法是代码版本控制":

The most easy way of memorizing this rule is by "code versioning":

<DIV with z-index=1>
    <DIV with z-index=3/>   
</DIV>
<DIV with z-index=2>

因此，像小数或版本号一样， 1.3 从不大于 2 ，因此内部DIV将始终呈现低于第二个外部DIV.

So, like decimals, or versioning number, 1.3 will never be greater than 2, and therefore the inner DIV will be always rendered below the second outer DIV.

除此之外，您需要对每个设置 z-index 的DIV应用 positioning .

Other than that, you need to apply positioning to each DIV which sets z-index.

我只是设置了一个大数字，因为我很懒，如果需要=，您可以自己找到一个可行的数字.但是此代码可以在我在您的网站上测试时正常工作.

I just set a big number because I was lazy, you can find a good feasible number by yourself if you want =), but this code works as I tested it on your website.

谢谢.

请务必阅读: https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

这篇关于Z索引不起作用-替代技术或修复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！