overflow与z-index发生冲突，且二者必须同时存在。

最新推荐文章于 2023-04-21 17:40:14 发布

原创最新推荐文章于 2023-04-21 17:40:14 发布 · 4.2k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#overflow #滚动与层级冲突

css 同时被 2 个专栏收录

4 篇文章

订阅专栏

javascript

3 篇文章

订阅专栏

本文探讨了滚动与层级属性冲突导致的z-index失效问题，并提供了解决方案。通过使用绝对定位和动态生成popover的相对位置，可以有效避免层级错乱。文章包含了一个具体的示例，演示如何使用JavaScript动态调整popover的位置。

滚动与层级属性冲突

z-index失效

.popover-container {
    overflow: scoll;
    z-index: 1;
}
.popover-top {
    position: absolute;
    z-index: 1000;
}
<div class="popover-container">
    <a>ICON</a>
    <div class="popover-top">
        tips
    </div>
</div>

解决办法
使用position的fixed属性，采用绝对定位，并且动态生成popover的相对位置， demo如下。

.popover-container {
    overflow: scoll;
    z-index: 1;
}
.popover-top {
    z-index: 1000;
}
<div class="popover-container">
    <a id="icon">ICON</a>
    <div id='popover' class="popover-top hide">
        tips
    </div>
</div>

function(){
    let button = $("#icon");
    let popover = $("#popover");
    let rect = button.getBoundingClientRect();
    domX = rect.left;
    domY = rect.bottom;
    $("#popover").Css('left', domX.toString() + 'px');
    $("#popover").Css('top', domY.toString() + 'px');
    $("#popover").toggleClass("hide");
}