Bootstrap 4中.sticky-top元素内Popover滚动后内容隐藏问题求助

这个问题我之前也碰到过，核心原因是Popover默认会附加到触发按钮的父元素（也就是你的粘性导航栏）上，而粘性导航栏的定位特性（sticky）和布局上下文，会导致Popover的内容被遮挡，尤其是页面滚动后，导航栏固定在顶部，Popover的位置计算也会出现偏差。

这里有两个简单有效的解决办法：

方法一：将Popover挂载到body元素 #

初始化Popover时，指定container: 'body'选项，这样Popover会被直接插入到页面的body标签下，脱离导航栏的布局限制，自然就不会被导航栏遮挡了。

示例代码：

$('[data-toggle="popover"]').popover({
  container: 'body',
  // 你的其他Popover配置，比如title、content等
});

这个方法是最推荐的，从根源上避免了父元素对Popover的布局干扰。

方法二：调整Popover的z-index层级 #

如果方法一不适用，你也可以通过CSS强制提高Popover的层级，确保它在粘性导航栏之上。Bootstrap 4中sticky-top类的默认z-index是1020，所以我们把Popover的z-index设得更高一些即可：

.popover {
  z-index: 1030 !important;
}

如果你的项目里有自定义样式优先级配置，也可以去掉!important，只需要保证Popover的层级高于导航栏就行。

你可以先试试第一种方法，基本能解决滚动后Popover被隐藏的问题。

内容的提问来源于stack exchange，提问作者Matthew