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

滚动与层级属性冲突

---

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

---

总结： 使用绝对定位加上动态定位替代相对定位。