Menu
I would like to determine the z-index of an element on an html page from code. I am using jQuery.
jQuery will allow me to check the applied z-index using $(element).css("z-index"). If the z-index is not set on that element directly though, Firefox returns "auto" and IE returns "0". The effective z-index of that node then depends on the z-index of its container.
I figured I could calculate the effective z-index then by looking at the node and its parents until a z-index value is found. The problem is, at least on IE, I cannot disambiguate an element with a z-index of 0 from an element who will inherit the z-index of its parent, as in both cases .css("z-index") returns 0. Any thoughts on how to calculate the actual z-index of an element?
If you want to experiment, you can use this code. On IE it will output "0", "0", "0", "300". On Firefox it will output "auto", "auto", "0", "300".
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
alert($("<div></div>").css("z-index"));
alert($("<div style='position:relative'></div>").css("z-index"));
alert($("<div style='z-index:0'></div>").css("z-index"));
alert($("<div style='z-index:100'></div>").css("z-index"));
</script>
</body>
</html>
416
Z Index ( z-index ) is a CSS property that defines the order of overlapping HTML elements. Elements with a higher index will be placed on top of elements with a lower index. Note: Z index only works on positioned elements ( position:absolute , position:relative , or position:fixed ).
In CSS code bases, you'll often see z-index values of 999, 9999 or 99999. This is a perhaps lazy way to ensure that the element is always on top. It can lead to problems down the road when multiple elements need to be on top.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
on IE, I cannot disambiguate an element with a z-index of 0 from an element who will inherit the z-index of its parent
You're looking for elements that have an effective z-index. z-index is effective only on elements with a position style other than static. So you should look up the parents until you find a positioned element with z-index non-auto.
(This will give you the innermost z-index. Stacking contexts can be nested, so you might instead want to look at the outermost z-index by looking at the furthest ancestor to be positioned.)
On IE6-7, an element without a z-index incorrectly receives an automatic z-index of 0. So this will indeed give you a 0 reading when you look at the positioned element without a z-index in IE6-7... this may be wrong, but it's reflecting IE's already-wrong rendering which you'll have to avoid or work around anyway.
(In IE8 this is finally fixed and you will indeed get auto for the first alert, assuming a suitable doctype/EmulateIE setting to send it into IE8 native mode.)
82
I see the problem, but I'm not sure it really matters... because zero is the root z-index of the page is 0. In the following code:
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").get(0).style.zIndex);
alert($("<div id='root' style='z-index:10'><div id='blah'></div><div>").children('#blah').get(0).style.zIndex);
FF reports 10 and (not 'auto'). IE reports 10 and 0. For IE, if you see a 0, then move up a level. For FF, if you see a blank, then move up a level. And then in either case, if you get to the root, and the value is 'auto' (in FF's condition) then I (guess) you could assume that it is 0. (Maybe that's not a great assumption!)
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
