如何在滚动窗口中制作固定的覆盖？

<div class="scroll-container">
  <div class="content">
    <!-- 页面内容 -->
  </div>
  <div class="overlay">
    <!-- 覆盖元素内容 -->
  </div>
</div>

.scroll-container {
  position: relative;
  height: 500px; /* 设置滚动窗口的高度 */
  overflow-y: scroll; /* 开启垂直滚动条 */
}

.content {
  height: 2000px; /* 设置页面内容的高度，用于产生滚动条 */
}

.overlay {
  position: fixed;
  top: 50px; /* 设置覆盖元素距离窗口顶部的距离 */
  left: 50px; /* 设置覆盖元素距离窗口左侧的距离 */
  width: 200px; /* 设置覆盖元素的宽度 */
  height: 100px; /* 设置覆盖元素的高度 */
  background-color: rgba(0, 0, 0, 0.5); /* 设置覆盖元素的背景颜色，这里使用半透明的黑色 */
  z-index: 9999; /* 设置覆盖元素的层级顺序，确保它位于其他元素的上方 */
}