0

I have two elements, one has a fixed width and is set to float to the right (red element) while the other is a full width block element (blue element). Normally, the blue element is behind the red element, as I expect:

<div style="width: 5em; height: 5em; background: red; float: right;"></div>
<div style="height: 2em; background: blue;"></div>

But when I add a CSS filter to the blue element, it now appears in front of the red element:

<div style="width: 5em; height: 5em; background: red; float: right;"></div>
<div style="height: 2em; background: blue; filter: brightness(0.8);"></div>

Is there any way to prevent this behaviour while still using float and filter?

Brandon
  • 107
  • 1
  • 10
  • 2
    You can add `position: relative; z-index: -1;` to the blue div. Filters change the stacking context – Simp4Code Jul 20 '22 at 14:52
  • 1
    Does this answer your question? [Why does stacking order change on webkit filter hover?](https://stackoverflow.com/questions/25764404/why-does-stacking-order-change-on-webkit-filter-hover) – Simp4Code Jul 20 '22 at 14:54

0 Answers0