用於檢查z索引的Firefox附加組件

我正在處理一個相當大的站點，並且無法管理z索引。有沒有一個Firefox附加組件可以查看頁面，並給出一個聲明z-index的每個元素的有序列表？對於Z指數錯誤或難以找到的情況，這將節省大量的時間。用於檢查z索引的Firefox附加組件

2010-04-16 hekevintran

我發現這個有用：http://www.erichynds.com/jquery/visualizing-your-z-index-stacks-with-jquery/ – camcam 2012-01-26 13:40:29

你在這裏找到它

https://addons.mozilla.org/en-US/firefox/addon/60

如果你已經安裝了Web開發擴展，從菜單中選擇

Information > Display Topographic information

來源

2010-04-16 06:42:30 Jobst

如何檢查列表使用Web Developer的z-index元素？ – hekevintran 2010-04-16 07:10:05

通常有一個網頁開發工具欄，點擊信息，然後顯示元素信息，一個紅色的小方塊會出現在你懸停的元素周圍，點擊它，一個小黃框會出現在左上角，攜帶。鍵盤快捷鍵Ctrl + Shift + F。 – Kyle 2010-04-16 07:19:51

同樣，在相同的信息dorpdown中，單擊「顯示堆棧層次」。 – Kyle 2010-04-16 07:37:09

我會建議你使用Firebug http://getfirebug.com/ 您可以檢查你包括z索引在內的整個dom。

使用一些JavaScript來幫助您找到Z-索引的所有元素： 1.負荷的jQuery 2.插入此javascript：

<script type="text/javascript"> 
//replacethis by the elemets that could have a z index ('div, span, etc..') 
$('replacethis').each(function(){ 
if ($(this).css('z-index')) { 
    var zindex = $(this).css('z-index') 
    if (window.console) { 
    console.log($(this), zindex) 
    }else{ 
    $(this).css('border', '1px solid red').prepend('<strong>' + zindex +'</strong>') 
    } 
}; 

}); 
</script>

如果沒有加載你的Firebug控制檯，它會給一個紅色邊框添加到所有具有z索引的元素，並將z索引值放入該框。

來源

2010-04-16 06:57:00 meo

我確實使用FireBug，但它沒有一個視圖，只顯示聲明z-索引正確嗎？ – hekevintran 2010-04-16 07:06:51

多數民衆贊成是正確的，但通過點擊元素，你可以看到，如果有一個Z指數或沒有。使用螢火蟲，並使用一個小小的JavaScript，可以幫助您找到所有具有z索引的元素： 1. load jquery 2。插入此javascript：確保您的螢火蟲控制檯上 – meo 2010-04-16 07:14:02