暫時將所有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」

回答

相關問題