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

Question

Welcome To Ask or Share your Answers For Others

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

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

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 checkbox is not reachable in the latest versions of Chrome, FF, Safari or Opera. The checkbox is reachable in IE9, however. The same goes for absolute and fixed whilst static works.

I have been trying to find the reasons behind this but to no avail.

Can I assume that the non-IE-browsers handles this situation correct and IE does not?

An example:

<html>
<head>
<style type="text/css">
.divWithCheckboxRelativePos{
    position: relative;
    z-index:-1;
}
.divWithCheckboxStaticPos{
    position:static;
    z-index:-1;
}

</style>
</head>
<body>
<div class="divWithCheckboxRelativePos">
    Does not work:<input type="checkbox" onclick="alert(this.checked);"/>
</div>
<div class="divWithCheckboxStaticPos">
    Works:<input type="checkbox" onclick="alert(this.checked);"/>
</div>
</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T19:31:59+0000

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:

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

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

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

the non-positioned floats.

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

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

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.

Categories

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

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

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags