子元素設置position:fixed，z-index大於父元素依然被父元素蓋住

在項目中遇到一個奇怪的問題，當父元素樣式overflow有滾動條、borde-radius存在、position不爲static時，和z-index不爲auto時，子元素的position就算是fixed，且z-index大於父元素，也會被隱藏掉。源碼和效果圖如下：

其他前端有趣的例子和坑合集：https://github.com/wqhui/CodeDemo
直接預覽：預覽鏈接

		<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>