如何将粘性手风琴头放在打开的手风琴体上

Question

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

然而，目前手风琴正文的内容出现在设置为粘性的标题上。

我希望手风琴正文始终位于视口的顶部，而手风琴正文在滚动时位于标题下方。

有什么方法可以防止手风琴标题和正文重叠？我试过设置相对于手风琴头的位置，但这没有奏效。我也使用了 Z-Index，但没有用

.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;}