How to calculate the effective z-index of an HTML element
html, z-index
Solution
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.)
Problem
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> ```