Why does backdrop-filter change the position of child elements

Question

This is a situation I encountered

#block1 {
    top: 0vh;
    height: 50vh;
    bottom: 0px;
    position: absolute;
    /*backdrop-filter: blur(10px);*/
}
#block2 {
    width: 50vw;
    bottom: 0px;
    position: fixed;
    height: 50vh;
    background: #2196F3;
}

<html>
<head></head>
<body>
<div id="block1">
    <div id="block2"></div>
</div>
</body>
</html>

A blue block will appear at the bottom of the page. But when I add backdrop-filter: blur(10px); to #block1,

#block1 {
    top: 0vh;
    height: 50vh;
    bottom: 0px;
    position: absolute;
    backdrop-filter: blur(10px);
}
#block2 {
    width: 50vw;
    bottom: 0px;
    position: fixed;
    height: 50vh;
    background: #2196F3;
}

<html>
<head></head>
<body>
<div id="block1">
    <div id="block2"></div>
</div>
</body>
</html>

This blue box will appear at the top of the page. This is where I am confused.

Why does changing the background-filter of the parent element change the position of the child element?

Is this a feature of css? (if yes, then why does css have this feature)

Why does backdrop-filter change the position of child elements

0 Answers0