滾動與層級屬性衝突

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>

js

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");
}

總結： 使用絕對定位加上動態定位替代相對定位。