Why does negative z-index and non-static position disable my checkbox in most browsers?

Question

I have a div containing a checkbox. At certain times the z-index of this div is negative and the postition relative and when this is the case the c

Answer 1

The reason static works is because z-index is only applied to positioned elements - absolute, relative, fixed.

I believe in this instance, IE may have got the z-index right. The problem you are describing sounds like the checkbox is being placed behind the parent element in Chrome, FF, Safari and Opera.

The following text extract from W3.org descibes the order in which the z-index elements are drawn:

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.

2. the child stacking contexts with negative stack levels (most negative first).

3. the in-flow, non-inline-level, non-positioned descendants.

4. the non-positioned floats.

5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.

6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.

7. the child stacking contexts with positive stack levels (least positive first).

However, it sounds like Chrome, FF, Safari and Opera could be drawing the negative z-index elements (2) before the parent element's background (1).

In any case, as you can see, the negative z-index elements are pretty near the bottom of the pile, so if an element requires any kind of user interaction then a negative z-index is probably not the best choice.

Additional Note

Another reason it could be working in IE and not the others is that IE tends to treat "empty" elements as if they do not exist. So if there is something drawn above the checkbox but it contains nothing (no background, content etc) then IE will ignore it and allow interaction with the element below - where the other browsers will not.