z-index属性不起作用

嗨，我有以下代码，当我点击某个按钮fadeTo时，我不#some只有内容没有#some标签
在这种情况下， fadeTo涉及#some标签

 
 
 
 #content{ width:100%; height:100%; outline:1px solid red; margin:auto; z-index:0;} #registration,#login{ width:350px; height:300px; outline:1px solid blue; display:none; z-index:500; position:fixed;} $(".button").click(function(){ $("#some").fadeToggle(); $("#content").fadeTo(500,0.5); }); 

Answer 1

如果你有2个像这样的

，

并且两者都有absolute位置你可以写z-index属性

 .a { z-index:1; } .b { z-index:2; } 

.a div结束了.b div

Answer 2

z-index属性仅适用于非静态定位元素。 即你需要为元素使用relative位置， absolute位置或fixed位置之一。

在这种情况下，您可能需要position: relative; CSS声明。

---

老实说，我不确定你在这种情况下使用z-index的原因。

如果您要排除#some元素不被.fadeTo()方法处理，您可以用元素（或元素）包装#content的内容并将该方法应用于它们，如下所示：

 $(".button").click(function(){ $("#content").find(':not(#some)').fadeTo(500,0.5); }); 

HTML

 
 
 
This is a paragraph
 A link here 
   

工作演示 。

Answer 3

我可能是错的，但我相当肯定你想要包含在z-index中的两个元素必须具有非静态定位。

因此，如果您创建#content 和 #registration，＃login非静态元素，它应该可以工作。

Answer 4

实际上，它们只需处于相同的堆叠环境中。 将position和z-index属性设置为元素时，会为其创建新的堆叠上下文。 然后，它像任何其他元素一样。 您不需要在其子项上重复z-index

正如您在此示例中所看到的，第二个div

的子

具有最高的z-index z-index:4; 但是！ 它仍然在“ div3 ” div3因为div3拥有自己的堆叠上下文，它位于div2堆叠上下文之上。

http://jsfiddle.net/TCHdevlp/r7nyL/

这意味着z-index在手工创建的堆叠上下文中完全无用。