暂时将所有css z-index设置为“none”

如何遍历所有元素，并且是否存在应用于任何元素的关联z-index样式，将z-index样式设置为无...？暂时将所有css z-index设置为“none”

然后，在完成以下函数后，将原始z索引返回原来的值。

我正在使用的小脚本。

$(document).ready(function() { 

$("<div/>", { 
    "class": "DooSuperOverlay" 
}) 
.prependTo("body") 
.animate({opacity: 1.0}, 3000) 
.fadeOut("slow"); 

});

恐怕如果有z索引的施加到在样式表中的主要含有的元素，这种效果不会工作它是在current demo i have. here.

方式的CSS可以是有益的：

.DooSuperOverlay { 
    position:absolute; 
    top:0px; 
    left:0px; 
    height:100%; 
    width:100%; 
    background-color:#000; 
    z-index:10000; 
    } 

#%id% { 
    position:relative; 
    z-index:10001; 
} 

#%id% .outer_box { 
    position:relative; 
    z-index:10001; 
} 

#%id% .inner_box { 
    position:relative; 
    z-index:10001; 
}

如果存在任何包含使用z-index应用的＃％id％div的div，即使有问题的z-index = 1 ..如果z-index：none（定义但是“none”）

这里是上面的CSS的HTML：

<!--doobox stack begin http://www.doobox.co.uk --> 
    <div class="outer_box"> 
     <div class="inner_box"> 
     %slice% <!--replaced with content --> 
     </div> 
    </div> 
<!--doobox stack end http://www.doobox.co.uk -->

如CSS，打破这个脚本：使用$

#container{z-index:1;} 

<div id="container"> 
<!--My html resides here and if any parent has z-index like eg, no matter of value unless none.. this script breaks --> 
</div>

来源

2010-10-23 Doobox

你有没有使用$（'*'）？ – Val 2010-10-23 06:24:24

不，我不确定那会做什么......？ – Doobox 2010-10-23 06:26:51

说实话，可能有更简单的方法来解决这个问题。这只是我最初的想法，是一种解决方法。我无法理解我的生活，看看为什么如果一个包含.outer_box div的包含div的z-index为1或任何数字，在样式表中应用时，它会中断的原因......他们应该按照我的逻辑被outer_box的值较高，但不是。 – Doobox 2010-10-23 06:39:16

迭代通过DOM（ '*'）将是非常昂贵的。但是，由于您运行的函数在文档准备就绪之后，您将立即知道您是否已经设置了任何大于10000的z-index属性。我最好建议您简单地跟踪您设置z-index的元素。基本上你知道，你可能永远不应该发送一个Z指数> 10000.

这是我会做的。使一些限制

Layer 0 (z-index = 0 or none) 
    Body 
    Navigation 
    Other elements 

Layer 1 (z-index = 100) 
    Some modal dialogs 


Layer 2 (z-index = 200) 
    a Bar Chart 
    a pie Chart 

... 
Layer n

一直走，直到你通过你自己的自定义设计标准

来源

2010-10-23 06:43:19

奇怪的是，可以应用于任何包含上述＃％id％dis的元素的z-index，即使z-index = 1，也会打破这一点。其中逻辑表示我已经应用了z-index = 10001应该在所有情况下都将这一点展现出来......只有在＃％id％div的父元素没有应用z-index或没有z-index = none的情况下，这才起作用......为什么哦，为什么仅仅是事实一个低z-索引已经应用于父元素中断了这个..？ – Doobox 2010-10-23 06:52:34

您能否发布您的整个页面，包括所有的HTML，CSS和JavaScript？ http://jsbin.com – sunn0 2010-10-23 09:15:20

工作演示在这里http://www.doobox.co.uk/test/test.html ..和z-index的演示：1应用于其中一个包含div的演示样式表在这里http://www.doobox.co.uk/testsite/（不工作）..我会修改帖子来显示不能总是避免的有问题的CSS。 – Doobox 2010-10-23 09:27:16

我张贴的答案包括你需要的所有层和经理的Z-indicies反而能够格式化一些代码。

第一：我已经将它解释为预期的行为是叠加衰落，但是在测试页面上叠加衰落从未发生过。 #content div在您的示例页面上具有z-index：auto并将其更改为z-index：加载页面后1不会更改任何内容。我在Ubuntu上使用Firefox 3.6.3。

如果我改变

<div class="DooSuperOverlay" style="opacity: 1; display: none;"></div>

到

<div class="DooSuperOverlay" style="opacity: 1; display: block;"></div>

一旦页面加载，因此可能不是一个z-index的问题，它工作得很好。

我怀疑它做：

.animate({opacity: 1.0}, %id=delay%000)

为什么呢？在div已经在不透明1，它可以与下一行

.fadeOut("slow");

因为它相对的，即动画（{不透明度：0}）干扰

而且是有没有办法可以插入

<div class="DooSuperOverlay"></div>

直接在html代码中，现在直到页面加载完成后才会添加叠加层。

来源

2010-10-23 16:25:13 sunn0

暂时将所有css z-index设置为“none”

回答

相关问题