使用fixed定位发现元素并非相对视口定位

使用position:fixed固定定位时，最开始一直认为是相对于视口进行定位的，今天发现了问题

<div class="father">
    <div class="child"></div>
</div>


.father{
    width: 300px;
    height: 300px;
    background-color: pink;
    backdrop-filter: blur(10px);
}

.child{
    width: 100px;
    height: 100px;
    background-color: orange;
    position: fixed;
    bottom: 0; 
}

效果图

从上边效果图可以看到子元素使用固定定位并没有相对于整个视口固定定位，而是相对于父元素进行了定位

问题原因：

查看文档链接地址：https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#fixed