使用转换时Z索引不起作用：translateY（）

Question

我想使用z-indexes将不同的元素彼此堆叠。因为我在transform元素上使用了scroll（为该元素的transform属性设置了动画，以便使用javascript进行平滑滚动），所以z-index: 3;上的box }元素不再起作用。具有z索引的所有3个元素都位于absolute或fixed中。我该如何解决这个问题？

<div class="container">
   <div class="scroll" style="transform: translateY(-200px);">
      <div class="slider">
         <div class="img-slider" style="z-index: 2;"></div>
         <div class="text-slider" style="z-index: 4;"></div>
      </div>
   </div>
</div>

<div class="box" style="z-index: 3;"></div>

预期结果：img-slider应该在底部，box之上，而文本滑块应该在这两个元素的顶部。