Question

嗨，大家好我有以下代码，当我点击某个按钮fadeTo时，我只会点击没有#some标记的内容在这种情况下，fadeTo涉及#some代码

<div id="content">
<div id="some"></div>
</div>


#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

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

<div id="content">
    <div id="some"></div>

    <p>This is a paragraph</p>
    <a href="">A link here</a> <br>
    <img src="http://placehold.it/50" alt="may be an image here">
</div>

<强> WORKING DEMO

Answer 2

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

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

Answer 3

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

正如您在此示例中所看到的，第二个div <div id="div2-2">的子项具有最高的z-index z-index:4;但是！它仍然是＆＃34;＆＃34;＆＃34; div3因为div3拥有自己的堆叠上下文，该上下文位于div2堆叠上下文之上。

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

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

Answer 4

如果你有2个这样的div <div class="a">，<div class="b"> 并且两者都有一个absolute位置，您可以写z-index属性

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

.a div超过.b div

z-index属性不起作用

4 个答案: