ansaurus

Question

How to calculate the effective z-index of an HTML element

Answer 1

+1 A:

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.)

bobince 2010-01-07 22:44:55

Good point that the z-index should only be considered for positioned elements (and any traversal to determine an elements z-index should skip non-positioned elements).

Frank Schwieterman 2010-01-07 23:05:37

IE will return a z-index of 0 in cases where the z-index is inherited. IE will however apply the inherited z-index correctly, so the IE6-IE7 scenario is still a problem.

Frank Schwieterman 2010-01-07 23:06:23

The bug is that IE6-7 *can't* ‘inherit’ a stacking context on a positioned element. When you get `0` as `z-index` on a positioned element, you can be sure that 0 is the z-index IE is actually using to render the element — even if it shouldn't be according to the CSS spec.

bobince 2010-01-07 23:43:47

Hmm that is news to me. Contradicts things I've seen in the past, I will have to experiment to be sure I follow what you're saying. Thanks for the clarification though.

Frank Schwieterman 2010-01-08 17:48:03

Google IE z-index bug for endless reports of the issue. Generally, if you're nesting positioned elements it's safest to make sure to put z-index on every positioned elements. Otherwise IE6-7 is likely to render the wrong thing.

bobince 2010-01-08 19:58:35

Good point but now you are answering a different question.

Frank Schwieterman 2010-01-14 18:06:58

Answer 2

+1 A:

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!)

Michael Bray 2010-01-07 22:46:04

"For IE, if you see a 0, then move up a level." This statement assumes that the z-index of the element wasn't set to 0 explicitly. I guess this is unlikely but I ruled this approach out before for this reason. Maybe its possible as the content I'm looking at is ad content, where some of the ad providers might do odd stuff if they can to get more visibility.

Frank Schwieterman 2010-01-07 23:01:41

Yeah I get your point.... however I would question... does IE itself distinguish? That is, does it use 0 as a marker to mean "not set"? If that is the case, then setting 0 is no different than not setting it at all. I guess you'll need to run a few actual rendering tests to really know for sure.

Michael Bray 2010-01-07 23:19:08

ansaurus

tags:

views:

answers:

How to calculate the effective z-index of an HTML element

related questions