How to bring sticky accordion header forward over open accordion body-CodePudding

I currently have an accordion header that has been set as position sticky and top 10px as shown below. You can see the blue accordion header behind the questions in the red box

However currently the content of the accordion body is appearing over the header that is set as sticky.

I would like the accordion body to be always at the top of the viewport with the accordion body being below the header when scrolling.

What way would I be able to prevent accordion header and body overlapping? I have tried setting the position relative to the accordion header but this hasnt worked. I have also using Z-Index which hasnt worked

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


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

CodePudding user response：

To bring the header forward over the top of the accordion body, using the following class has worked making it look how it is intended.

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