CSS中低z-index绝对定位元素覆盖高z-index元素如何解决

• 地图上方放置了一个设置为position: absolute的div，内部包含四个白色椭圆元素，给该div设置z-index: 1时页面显示正常。
• 点击页面右上角汉堡按钮唤起侧边导航菜单时出现显示异常：前述绝对定位的椭圆div会始终渲染在侧边菜单上层，遮挡菜单内容。
• 多次尝试调整侧边菜单的z-index属性，从2到远高于2的数值都试过，始终无法让侧边菜单显示在椭圆div上方。
• 把椭圆div的position属性改为relative时层级显示完全正常，但受页面视觉效果要求限制，该div必须使用absolute定位。

相关DOM结构 #

侧边菜单嵌套在wrapper元素内，wrapper节点排在包含椭圆div的main标签之前，结构参考：

<wrapper> 
  /* 侧边菜单代码在此处 */
</wrapper>
<main> 
  /* 带白色椭圆的绝对定位div代码在此处 */
</main>

这是典型的CSS层叠上下文生效逻辑问题：z-index的层级比较只在同一个层叠上下文的同级元素之间生效，子元素的z-index永远无法突破父元素所在的层叠层级。
出现这个问题的核心原因基本都是以下两种：

1. 承载侧边菜单的wrapper元素是默认的position: static状态，没有创建独立层叠上下文，你给内部侧边菜单设置的高z-index，实际是和main内的椭圆div处在同一个根层叠上下文下比较；而DOM顺序上main在wrapper之后，同层级下定位元素z-index相同时后面的元素会覆盖前面的，就会出现调侧边栏z-index不生效的情况。
2. main标签或者它的某个祖先元素（常见是地图组件自动加的性能优化属性）意外创建了层级更高的层叠上下文，比如设置了transform: translate(0)、opacity: 0.99、will-change: transform这类属性，这时候椭圆div的z-index是在main创建的高层级上下文内部生效，给侧边菜单设再高z-index都没用，因为侧边菜单所在的wrapper整个块的层叠优先级本身就比main低。

按优先级从高到低选择即可：

• 优先给承载侧边菜单的wrapper元素设置非static的定位属性（根据布局需求选position: relative/fixed/absolute都可以），再给wrapper设置z-index: 10（只要比椭圆div的z-index:1高就行）。设置完成后wrapper会创建独立的层叠上下文，整个wrapper块的层级都会高于椭圆div，内部的侧边菜单自然就会显示在最上层，不会被遮挡。
• 如果不想修改wrapper的定位属性，可以检查main标签及它的上游祖先元素，排查有没有意外创建层叠上下文的属性，移除这类不必要的属性即可恢复正常层级。注意如果是地图组件自带的属性不要随意删除，避免引发地图渲染卡顿、错位等其他问题。
• 轻量适配方案：把椭圆div的z-index从1调整为z-index: 0，只要它的z-index不高于侧边菜单所在上下文的层级，就不会出现遮挡问题。不要随便设成-1，否则可能跑到地图容器下方看不见。

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