当div溢出-x时，内部div的位置粘性不起作用

Question

当它的容器div在x轴上溢出时，我想在其顶部固定div的位置，我有以下代码：

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

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

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

  </div>
</div>

当它在x轴上没有溢出时，它可以正常工作，但是在必须溢出时，粘滞位置不起作用。

是否有一种方法可以强制将innerdiv的位置固定到视口顶部而不依赖于其容器？

Answer 1

尝试使用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>