CSS: backdrop-filter messing up stacking order [duplicate]

Question

In the below example, the div has a backdrop filter applied (because I want to have a blur effect on the part of the page's background that's covered by the div).

img {
  float: left;
}

div {
  background: rgba(255, 0, 0, .5);
  backdrop-filter: blur(8px);
}

<img src="https://placekitten.com/400/200" />
<h1>
  Title
</h1>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consequat est laoreet, pellentesque orci quis, faucibus nulla. Curabitur at augue ex. Pellentesque in nulla eleifend, porttitor dui a, commodo neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam quis lacinia libero, nec vehicula velit. Mauris sit amet malesuada tortor. Vestibulum volutpat mauris a ultricies bibendum. Mauris ornare dolor lectus, quis accumsan ligula ornare at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas ut ipsum nulla. Quisque ante mauris, sagittis at orci sit amet, fermentum ullamcorper justo.
</div>

This results in the background of the div covering the img, which is not what I want.

When I remove the backdrop-filter in the CSS, the div becomes layered under the img, this is the behavior I'm looking for.

How can I keep the backdrop filter in my div while still having the img cover it?

Answer 1

From the docs:

The backdrop-filter CSS property lets you apply graphical effects such as blurring or color shifting to the area behind an element.

This means that the filter will not apply to the areas in front of the element. So for that just have a z-index property on your image with a non-static position

img {
  position: relative;
  z-index: 2; /* arbitrary value - the higher this is, the more the element will be on top of other elements */
}