不修改DOM顺序和元素position属性 如何借助层叠上下文将元素置顶

你之前尝试transform、opacity属性不生效，是因为属性添加的对象错误，不需要给内部的popover加，给父容器main-content创建更高优先级的层叠上下文即可，完全符合你提出的所有约束：

• 不需要修改任意元素的position属性
• 不需要调整DOM节点的层级顺序
• 不需要额外依赖

实现代码 #

二选一即可，两种方案都不会对现有UI产生视觉影响：

方案1：transform创建层叠上下文 #

.main-content {
  transform: translateZ(0);
}

方案2：will-change创建层叠上下文（性能更友好，适合交互频繁的场景） #

.main-content {
  will-change: transform;
}

原理解释 #

默认同级兄弟节点遵循「后来者居上」的层叠规则，你的vertical-menu作为后渲染的兄弟节点，默认层级高于main-content，因此main-content内部所有元素默认都无法覆盖vertical-menu。
给main-content添加上述属性后，它会创建独立的层叠上下文，整体层级会高于没有创建层叠上下文的vertical-menu，内部的popover自然就可以显示在vertical-menu上方。

如果操作后还是不生效，检查vertical-menu是否本身也设置了会创建层叠上下文的属性（比如transform、opacity小于1、filter等），这种情况只需要给main-content额外加一行z-index: 1即可：

.main-content {
  transform: translateZ(0);
  z-index: 1;
}

这里z-index生效不需要修改position属性，因为只要元素创建了层叠上下文，就支持z-index设置，完全不会破坏原有布局。

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