I'm working on a fairly large site and am having trouble managing z-indexes. Is there a Firefox add-on that will look at a page and give me an ordered list of every element with a z-index declared? That would save a ton of times for the cases where a z-index was wrong or hard to find.
How do I examine a list of elements with z-indexes using Web Developer?
hekevintran
2010-04-16 07:10:05
There usually is a web developer toolbar, click Information, then display Element information, a little red box will appear around the element you are hovering, click it and a little yellow box will appear in the top left corner with all the attribute that element carries. Keyboard shortcut Ctrl+Shift+F.
Kyle Sevenoaks
2010-04-16 07:19:51
ALso, in the same information dorpdown, click "Display stack levels".
Kyle Sevenoaks
2010-04-16 07:37:09
Awesome! "Display stack levels" was exactly what I was looking for.
hekevintran
2010-04-16 07:48:14
It's a great tool, I use it allll the time, It's automatic for me to fire up the site I Work on and hit ctrl+shif+f straight away! Glad it helped you.
Kyle Sevenoaks
2010-04-16 07:55:14
A:
I would suggest that you use FireBug http://getfirebug.com/ You can examine you whole dom including z-indexes.
Use a little javascript to help you find all elements with z-indexes: 1. load jquery 2. insert this 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>
if your the firebug console is not loaded it will give a red border to all the elements with a z-index and perpend the z-index value to the box.
meo
2010-04-16 06:57:00
I do use FireBug, but it doesn't have a view that shows only elements that have declared z-indexes right?
hekevintran
2010-04-16 07:06:51
thats right yeah, but by clicking on the element you can see if there is a z-index or not. Use firebug and use a little javascript that helps you find all elements with z indexes:1. load jquery2. insert this 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')) { console.log($(this))}})</script>make sure your firebug console is on
meo
2010-04-16 07:14:02