滚动时实现导航栏覆盖卡片的问题求助（附CSS代码）

核心原因 #

导航栏的sticky定位和z-index设置本身有效，但如果卡片的父级元素创建了堆叠上下文，会导致导航栏的层级无法穿透该上下文，最终被卡片遮挡。

具体解决步骤 #

1. 给卡片添加低于导航栏的层级值
   直接为卡片设置z-index，数值小于导航栏的1000即可，示例代码：

   background: #fff;
   width: 80%;
   border-radius: 15px;
   margin: 20px 0;
   max-height: 190px;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   z-index: 999; /* 新增：数值小于导航栏的1000 */
   

2. 排查卡片父容器的堆叠上下文
   如果上述方法无效，检查卡片的父元素是否设置了z-index、transform、opacity、filter这类会创建堆叠上下文的属性：

   • 若有这类属性，优先移除；
   • 无法移除的话，给父容器设置比导航栏更低的z-index（比如998）。

3. 确保导航栏父级无堆叠限制
   导航栏的直接父元素不要设置z-index（除非是auto或0），避免将导航栏限制在更低的堆叠上下文中。

验证方式 #

调整后滚动页面，确认导航栏是否始终覆盖在卡片上方；若仍有问题，排查页面内其他元素的z-index设置，确保没有超过1000的干扰元素。

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