如何使sticky定位的手风琴头部层级高于展开的手风琴内容

问题现象 #

设置了position: sticky; top:10px的手风琴头部滚动时被展开的主体内容覆盖，调整z-index、修改头部position为relative都没有效果。

核心原因 #

1. position: sticky元素会生成独立层叠上下文，同个父容器.accordion-item下的兄弟元素默认遵循DOM顺序层叠，排在后面的折叠内容默认会渲染在头部上方
2. 之前z-index不生效的两个核心诱因：
   • sticky头部默认是透明背景，下方内容直接透过头部显示，视觉上呈现被遮挡的效果
   • 折叠面板默认是position: static定位，z-index属性对static定位的元素完全无效
3. 额外踩坑点：如果sticky元素的任意祖先元素设置了overflow: hidden/auto/scroll，sticky吸附效果会直接失效，需要先排查这个问题。

修复代码 #

在原有样式基础上补充以下规则即可，不需要修改现有模板结构：

.accordion-header.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  /* 设置不透明背景，避免下方内容透出，替换为你实际使用的头部背景色即可 */
  background: #fff;
  /* 设置高于折叠面板的层级 */
  z-index: 10;
  /* 可选：吸附状态下加阴影强化层级区分 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.07);
}

/* 给折叠面板设置相对定位和低层级，让z-index规则生效 */
.accordion-collapse {
  position: relative;
  z-index: 1;
}

避坑提示 #

• 不要把sticky头部的position改成relative，修改后sticky吸附效果会直接消失
• 如果头部的蓝色按钮是通栏设计，直接给.accordion-button设置对应背景色即可，保证整个吸附头部区域无透明部分
• 不要给外层.accordion-item或者手风琴最外层容器设置非visible的overflow属性，否则sticky定位会失效

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