div 在其他 div 中，相对于滚动向下移动（反应）

Question

我希望在向下滚动页面时有一个物体从天而降。这个想法是：你有object div 不动。它应该位于页面的中心（距离其父级顶部 50 px），当您向下滚动时，它也应该向下滚动。

有什么问题？ object 在另一个 div 中。我只希望object 在这个div 中可见。所以不在整个网站上。

我尝试了什么？ 1： 固定定位，但随后在entire page 上显示，z-index 不适用于fixed。 2： Relative 定位在 parent 和 absolute 上，但是当我滚动时 object div 不会向下滚动。

视觉表现：：

向下滚动时：

反应组件：

<div className="container">
      <div className="container--object">
          <img src={object}/>
      </div>
</div>

CSS

.container {
  min-height: 100vh;
  position: relative;
}

.container--object {
  position: absolute;
  top: 50px;
}

我的父组件是主页。而这个反应组件的siblings 是其他div's。使 div 向下移动页面的功能是我正在努力解决的问题，我怎样才能将 object div 向下移动？有没有办法让它基于浏览器的顶部？

Answer 1

好吧，如果我理解正确，你想要这样的东西吗？我使用了一张图片和一些测试文本

.container {
  min-height: 100vh;
  height: 2500px;
  position: relative;
}

.container_object {
  position: fixed;
  top: 50px;
}

<div class="container">
      <div class="container_object">
          <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />
      </div>
      <div style="position: absolute; top:500px">
        TEEEEEEEEEEEEST 111111111
      </div>
      
      <div style="position: absolute; top:800px">
        TEEEEEEEEEEEEST 222222222
      </div>
</div>

你应该在整页中看到这个 sn-p