Абсолютная позиция не работает с фоновым фильтром [дубликат] ⇐ CSS

[Anonymous]

Вот проблема: когда я удаляю фоновый фильтр, абсолютный элемент позиционируется относительно тела, чего я и хочу. Но если я добавлю фоновый фильтр, он будет позиционирован относительно корня.

Код: Выделить всё

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
border: 3px solid red;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}

#root {
border: 3px solid blue;
height: 80vh;
width: 80vw;
background-color: #46443e96;
backdrop-filter: blur(19px) saturate(180%);
/* Problem Here */
}

.left {
/* display: flex; */
flex-direction: column;
width: 30%;
height: 100%;
overflow: scroll;
}

.item {
/* flex-shrink: 0; */
border: 3px solid orange;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}

.absolute {
position: absolute;
border: 3px solid green;
width: 50px;
height: 50px;
top: 0;
left: 0;
}

Код: Выделить всё

item
item
item
item
item
item
item
item
item
absolute

Я не понимаю, почему, и мне нужно решение.

Подробнее здесь: https://stackoverflow.com/questions/786 ... rop-filter