CSS 相对于父元素的 fixed 定位

最近有一个需求是导出功能因为生产时间较长，需要加一个弹窗显示导出进度，别的地方用不到这个导出进度，准备在当前内容区域左下角显示一个文件进度的区域，默认收起状态，点击导出或者最大化按钮后放大显示导出文件进度的 table，table 最后一列显示进度，生成完成后显示下载按钮。

使用 fixed 定位，但 fixed 定位默认是相对于整个页面的，不是内容区域。

.rate {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: beige;
    width: 300px;
    height: 60px;
    line-height: 60px;
}

查阅 MDN 得知：
fixed 属性会创建新的层叠上下文。当元素祖先的 transform、perspective、filter 或 backdrop-filter 属性非 none 时，容器由视口改为该祖先。

修改 .bottom 加上 transform: scale(1) 后,导出进度 区域变成了相对于 .bottom 定位。

但是当 .content 区域长度很长，产生滚动条时，滚动条向下时 导出进度 区域也会跟着滚动。这个地方困扰了很久，试了很多办法。

搜索 fixed 的时候在张鑫旭大佬的博客里有一篇讲 fixed 相对于哪个元素定位的，评论里有提到解决的方法。最后的解决办法是 .content 外包了一层，这样滚动条滚动时 导出进度 区域不会跟着滚动。

.wrap {
    overflow-y: auto;
    height: 100%;
}