CSS filter effect rendered over absolutely positioned element

user_640694 0
Viewed 62

Please consider this HTML+CSS:

#testArea {
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  background-color: blue;
  padding: 20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
}
#testArea:hover {
  -webkit-filter: brightness(50%);
}
#absElement {
  position: absolute;
  left: 100px;
  top: 100px;
  width: 100px;
  height: 100px;
  background-color: green;
}
<div id="absElement"></div>
<div id="testArea">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</div>

If you mouse over the blue area, the :hover CSS style kicks in and 50% brightness filter is applied. And somehow, the absolutely positioned green absElement disappears. I was expecting that the rendering of the testArea element itself would be altered, but it appears that a kind of overlay element is dynamically rendered just over the host element instead.

If I add z-index: 1 to the #absElement style definition, the behavior is then according to what I was expecting. Another way to "fix" it, is by moving the absElement div after the testArea div. But it's strange that I should do so, because the absolutely positioned elements always should be rendered over the flow-layout elements.

What's going on here? I know I can add that z-index property and just move on, but I'd like to understand how the filter effect is applied/rendered.

css html
1 Answers

From the filter specification:

A computed value of other than none results in the creation of a stacking context [CSS21] the same way that CSS opacity does.

Then from another specification you can find the "painting order" of the elements:

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

Without filter, your element will get painted at step (3) since it doesn't create a stacking context. So it's under the position:absolute element painted at (6)

With filter, your element will also get painted at step (6) and in this case, the tree order will be considered to know which one will get painted first so it will end above the position:absolute one.

You can follow the specification to get more precise detail of each step.

user_86203330
Related