Make content scroll behind sticky header

Question

I have a scroll area in which there are different headings which I want to be sticky, have a look at this fiddle .

 .item{ height: 60px; width: 100%; background-color:red; margin:3px 0; } .heading{ position:sticky; top:0; height:40px; } 

 <div style="overflow-y:auto;height:300px;"> <h3 class="heading">Heading 1</h3> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <h3 class="heading">Heading 2</h3> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> <h3 class="heading">Heading 3</h3> <div class="item">Item 7</div> <div class="item">Item 8</div> <div class="item">Item 9</div> <h3 class="heading">Heading 4</h3> <div class="item">Item 19</div> <div class="item">Item 11</div> <div class="item">Item 12</div> </div> 

As you can see every item is visible behind the headings. As in the fiddle, in my real application these heading elements are also transparent. So I need a way to make the items overflow right under each heading.

Answer 1

Place background:inherit to heading and every wrapping element up to the element which has the image as backgrund. Plunkr Credits