Bootstrap 4通知下拉框被Packery网格覆盖的z-index问题求助

嘿，我碰到过好多次这种z-index看似“失效”的情况，大概率是堆叠上下文在搞鬼！你设置的z-index:10000没起作用，根本原因不是数值不够大，而是下拉框被限制在某个父元素的堆叠上下文里，没法突破到Packery网格项的上层。

核心原因拆解 #

当某个元素设置了position: relative/absolute/fixed/sticky，并且同时设置了z-index（哪怕是z-index:0这种非auto的值），它就会创建一个独立的堆叠上下文。这个上下文里的所有子元素，z-index只能在这个范围内生效，不管你给子元素设多大的数值，都没法跑到这个父元素的堆叠上下文外面去。而Packery的网格项大概率也创建了自己的堆叠上下文，所以你的下拉框就被盖住了。

具体解决步骤 #

• 排查父元素的堆叠上下文：打开浏览器开发者工具（F12），选中你的通知下拉框元素，往上遍历DOM树的每个父节点，检查它们的CSS属性——重点看有没有同时设置position（非static）和z-index的父元素。
• 打破父元素的堆叠限制：
  1. 如果找到这样的父元素，尝试移除它的z-index属性（如果不影响其他布局的话），这样父元素就不会创建独立的堆叠上下文了，下拉框的z-index就能全局生效。
  2. 要是不能移除父元素的z-index，那就给这个父元素设置一个比Packery网格项更高的z-index值，确保它的堆叠上下文层级在网格项之上。
• 把下拉框移到全局上下文：这是最稳妥的办法——Bootstrap的下拉组件支持通过data-container="body"属性，把下拉框的DOM直接插入到<body>标签下，脱离原来的父元素堆叠限制。你只需要给下拉触发按钮加上这个属性就行：

  <button class="dropdown-toggle" data-toggle="dropdown" data-container="body">
    通知
  </button>
  

• 确认下拉框的定位属性：最后再检查一下下拉框本身的position是不是absolute（Bootstrap下拉框默认是这个值），因为z-index只对非static定位的元素生效。

为什么Popover能正常显示？ #

因为Bootstrap的Popover组件默认就是把弹出元素插入到<body>标签下的，它处于全局堆叠上下文里，自然不会被Packery网格项的堆叠上下文影响，这也反过来验证了我们的判断。

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