CSS: Backdrop-filter Messing Up Stacking Order

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). This results in

Solution 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 */
}