1

I just want to ask if I understand something wrong.

Here is a Fiddle

<table> <th style="position: relative; width: 50px; height: 100px"> <div style="position: absolute; top: 0px; left 0px; width: 100%; height: 100%"> <!-- Here you can add z-index to fixt this issue --> <div style="width: 100%; height: 50%; border: solid black 1px; background-color: red"></div> <div style="width: 100%; height: 50%; border: solid black 1px; background-color: green"></div> </div> <div style="height: 50%"> <input type="checkbox"> </div> <div> <input type="checkbox" style="opacity: 0.9; cursor: pointer"> </div> </th> </table>

The issue is that both checkboxes are under a div that has parent element with position absolute, but second checkbox is over the div because it has an opacity. Basically if a checkbox has any opacity 0 - 0.9, it is over the div. If the opacity is set to 1 or there is no opacity property, it is under the div.

I thought it would be some browser issue but it is pretty browsers-wide behavior FF, Chrome, Edge. I know I can fix that with z-index property to set e.g. 1 to element with absolute position but my question is: Have I missed something or don't I understand something well and this behavior is correct?

Improve this question
3
  • 1
    developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/… Commented Sep 15 at 19:05
  • @imhvost thank you, interesting. I didn't meet that importance yet over 10+ years ;). Anyway it seems that there shouldn't be z-index 'auto' or less then '1' because z-index '0' is beaten by opacity too. Commented Sep 15 at 20:05
  • opacity does not "beat" z-index:0, but it's equal. So your checkbox paints over the abspos div because it is later in the DOM document. If the checkbox came first, the abspos div would paint over it, obscuring it. This isn't, strictly speaking, a stacking context issue, the checkbox and the abspos div are in the same stacking content, it's simply a paint order issue. Commented Sep 15 at 20:20

1 Answer 1

Reset to default
1

From the opacity section of the CSS Color Level 4 specification

Furthermore, if the z-index property applies to the box, the auto value is treated as 0 for the element; it is otherwise painted on the same layer within its parent stacking context as positioned elements with stack level 0 (as if it were a positioned element with z-index:0).

While I think that sentence is about as clear as mud, the parenthesized clause is all we need to know. If the checkbox has an opacity less than one, it's painted at the same step as positioned elements with z-index:0 in the same stacking context.

The effect of this is to move the opacity: 0.9 checkbox from step 7 to step 8 in the paint order;

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you, I'm not sure but it seems that step 7 to step 8 say nothing about opacity. I was curious if this "opacity" issue (about opacity push an element higher) is intention and clearly is. Other question is why they decide to do so, but it's another question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.