如何将粘性的手风琴标头通过打开的手风琴主体向前

Question

我目前有一个手风琴头，该标头已设置为位置粘性和前10PX，如下所示。 您可以在红色框中看到问题背后的蓝色手风琴头

我希望手风琴机构始终处于视口的顶部，在滚动时，手风琴机构在标题下方。

我将如何防止手风琴头和身体重叠？我尝试设置相对于手风琴头的设置位置，但这无效。我还使用了d没有起作用的z索引

.accordion-header.sticky {
position: -webkit-sticky;
position: sticky;
top: 10px;
}


<script type="text/template" id="accordion-item-template">
<div class="accordion-item">
    <h2 class="accordion-header sticky" id="headingOne">
        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="###NAME##"><i class="bi bi-eye-slash ##VISIBLE##"></i>##TEXT##</button>
    </h2>
    <div id="##NAME##" class="accordion-collapse collapse" data-bs-parent="###PARENT##-accordion">
        <div class="accordion-body" id="##NAME##-accordion-body"></div>
    </div>
</div>

Answer 1

为了将标头向前移到手风琴主体的顶部，使用以下班级可以使其看起来的预期。

.accordion-header.sticky {
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 1;}