子元素设置position:fixed，z-index大于父元素依然被父元素盖住

在项目中遇到一个奇怪的问题，当父元素样式overflow有滚动条、borde-radius存在、position不为static时，和z-index不为auto时，子元素的position就算是fixed，且z-index大于父元素，也会被隐藏掉。目前发现chrome80+该问题不存在，但是老版本还是有问题。
源码和效果图如下：

其他前端有趣的例子和坑合集：https://github.com/wqhui/blog
直接预览：预览链接

		<style>

#father {
    width: 200px;
    height: 200px;
    overflow: auto;
    border:1px solid blue;
    border-radius: 20px;
    position: absolute;
    z-index: 1;

    top:40px;
}
#child {
    background-color: red;
    width: 300px;
    height: 300px;
    position: fixed;
    z-index: 99999;
    top:100px;
    left:100px;
}
</style>
        <div id="father">
                <p>前几年，高铁运力不足的时候，某些路局为了缓解客流压力，冒着列车超员报警压死弹簧的安全隐患和列车服务设施过量损耗的风险选择发售无座票让人们能早点回家。但是没人理解铁路人的良苦用心，随之引发的就是社会舆论“强烈要求无座票半价”“黑心铁路有座无座一个票价”以及出现无座票旅客霸占有座票旅客座位的现象、无座票旅客霸占一等座、商务座的现象。铁总这下就怒了，干嘛要做这种吃力不讨好的事，加上运力在这几年越来越充足，一纸下文各个路局禁止发售高铁无座票。________各路局情况不一样，有些路局还是会发售少量无座票。
                        著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。</p>
            <div id="child" class="add-translate"></div>
        </div>