z-index 属性不起作用答案

【问题标题】：z-index property not workz-index 属性不起作用
【发布时间】：2014-03-23 03:07:01
【问题描述】：

嗨，伙计，我有以下代码，当我单击某个按钮时，我不会这样做 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);
 });

【问题讨论】：

标签： jquery css

【解决方案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.

【讨论】：

嗯，非静态定位元素

【解决方案2】：

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

因此，如果您将#content 和 #registration,#login 设为非静态元素，它应该可以工作。

【讨论】：

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

【解决方案3】：

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

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

.adiv 结束 .bdiv

【讨论】：

【解决方案4】：

事实上，它们只需要位于相同的堆叠上下文中即可。当您为元素设置position 和z-index 属性时，它会为其创建一个新的堆叠上下文。然后，它就像任何其他元素一样。你不需要在它的孩子上重复z-index

正如您在此示例中看到的，第二个 div <div id="div2-2"> 的子元素具有最高的 z-index z-index:4; 但是！它仍然“低于”div3，因为div3 有它自己的堆栈上下文，它位于div2 堆栈上下文之上。

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

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

【讨论】：