admin管理员组

文章数量:1611136

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

其他前端有趣的例子和坑合集：https://github/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>

本文标签： 元素PositionINDEXfixed

版权声明：本文标题：子元素设置position:fixed，z-index大于父元素依然被父元素盖住 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1728607442a1165633.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。