When a div overflow-x the position sticky of a inner div doesn't work

Question

I want to have a div with position fixed in the top when its container div overflow in x-axis, I have this code:

.container {
  width: 820px;
  overflow-x: scroll;
}

.innerdiv {
  position: sticky!important;
  top: 0;
  z-index: 100;
}

<div class="container">
  <div class="innerdiv">

  </div>
</div>

When it doesn't overflow in its x-axis, it works normally, but when it has to overflow, the position sticky doesn't work.

Is there a way to force the position of the innerdiv to be fixed to the viewport top and not dependent on its container?

Answer 1

Try using position: fixed.

.container {
   width: 820px;
   overflow-x: scroll;
 }
 .innerdiv {
    position: fixed;
    top: 0;
    z-index: 100;
  }

<div class="container">
   <div class="innerdiv">
   TEST
   </div>
 </div>