Make element inside element with position sticky above other sticky elements

Question

In the example below:

 .item { width: 100%; } .item-header { display: flex; flex-direction: column; background-color: red; position: sticky; z-index: 10; top: 0; } .title { order: 2; } .item-header-right { order: 1; margin-left: auto; } .item-header-right-placeholder { width: 100%; height: 18px; background-color: red; } 

 <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right">hello</div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> 

I would like to make it so the top right 'hello' always stays above the other sticky elements when going over them. Is this possible?

Here's the jsfiddle if its easier to edit there:

https://jsfiddle.net/azyfcn7m/

Answer 1

Depends on your remaining structure but this is one way to do it. You make the item position: fixed;

 * { box-sizing: border-box; } body { margin: 0; padding: 0; } .item { width: 100%; } .item-header { display: flex; flex-direction: column; background-color: red; position: sticky; z-index: 1; top: 0; } .title { order: 2; } .item-header-right { order: 1; margin-left: auto; } .item-header-right-placeholder { width: 100%; height: 18px; background-color: red; } .fixed-item { position: fixed; top: 0; right: 0; padding: .25rem; background-color: deepskyblue; z-index: 2; } 

 <div class="fixed-item">hello</div> <div class="item"> <div class="item-header"> <div class="title">hello</div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div> <div class="item"> <div class="item-header"> <div class="title">hello</div> <div class="item-header-right-placeholder"></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br> </div>