Weird backdrop filter

position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
position absolute text text text text text text text text
  1. how does the backdrop filter make the red cube change the position of the blue cube?
  2. how does the backdrop filter make the text go under the red cube? 
<body>
<div class="red">
	<div class="blue" />
</div>
</body>

red cube

position: unset;width: 400px;height: 400px;outline: 5px solid red;background-color: rgba(0, 0, 0, );backdrop-filter: blur(10px);

blue cube

position: fixed;width: 50px;height: 50px;outline: 5px solid blue;background-color: transparent;left: pxtop: pxbackdrop-filter: blur(10px);