如何解决CSS翻转卡滚动时重叠遮挡sticky导航栏的问题

问题根因 #

这个遮挡问题和翻转卡的position: absolute属性无关，核心原因是翻转卡用到的transform属性会创建独立的层叠上下文，默认状态下它的层叠顺序高于未设置z-index的粘性定位导航栏，所以才会出现翻转卡正面盖在导航上的情况。翻转卡背面只有hover触发旋转后才会显示，层叠计算规则一致，不会出现遮挡只是你没有触发对应场景而已。

解决方案 #

你不需要修改翻转卡的核心翻转逻辑，保留position: absolute属性完全不影响修复，选下面任意一种方案即可：

方案1（优先推荐）

给你的粘性导航栏设置足够高的z-index值，确保它的层叠顺序高于页面所有其他元素：

/* 把下面的选择器替换成你实际用的导航栏类名 */
.site-nav {
  position: sticky;
  top: 0;
  /* 新增下面这行，数值只要比页面其他元素的z-index都高即可 */
  z-index: 999;
}

注意要确认导航栏的所有父元素没有设置overflow: hidden、transform、filter这类会创建层叠上下文、限制z-index生效的属性，父元素没问题的话这个方案可以一次性解决所有元素遮挡导航的问题。

方案2

如果因为布局限制无法修改导航相关的样式，给所有翻转卡的外层容器设置较低的z-index即可：

.flip-card {
  /* 原有属性全部保留，只新增下面这行 */
  z-index: 1;
}

这个方案不会影响翻转卡的翻转效果和布局，同样可以解决遮挡问题，适合后续要批量添加15张翻转卡的场景。

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