如何让嵌套滚动容器内的顶部容器始终可见？

你尝试的position: absolute和sticky没达到预期，核心问题是属性搭配或结构不合理：

• 使用absolute时，元素会相对于父滚动容器固定在顶部，但如果你的需求是固定在页面视口，这个逻辑不匹配；
• 使用sticky时，父容器不能设置overflow: auto/scroll/hidden，否则粘性定位会失效，这是你用sticky失败的关键原因。

方案1：容器固定在滚动区域顶部（内部滚动时可见） #

调整结构，让半透明容器作为滚动容器的子元素，保持position: absolute，确保父容器设置position: relative，滚动内部内容时，容器会始终停在滚动区域的顶部：

<div style="border: 1px solid black;">
  <!-- 滚动容器，设置相对定位 -->
  <div style="position: relative; height: 500px; max-height: 500px; overflow-y: auto;">
    <!-- 固定在顶部的容器 -->
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 112px; background-color: rgba(0, 0, 0, 0.2); z-index: 10;">
      <div style="width: fit-content; padding: 15px; color: white; border: 1px solid white; margin: 20px 10px;">
        Button text
      </div>
    </div>

    <!-- 可滚动的金色内容，给顶部容器留出空间避免遮挡 -->
    <div style="width:100%; padding-top: 112px;">
      <svg x="0" y="0" width="100%" height="800">
        <rect x="0" y="0" width="100%" height="800" fill="gold"></rect>
      </svg>
    </div>
  </div>
</div>

方案2：容器固定在页面视口顶部（全局滚动时可见） #

把固定容器移到滚动容器外，使用position: sticky，确保它的父容器没有overflow限制：

<!-- 固定在视口顶部的容器 -->
<div style="position: sticky; top: 0; width: 100%; height: 112px; background-color: rgba(0, 0, 0, 0.2); z-index: 10;">
  <div style="width: fit-content; padding: 15px; color: white; border: 1px solid white; margin: 20px 10px;">
    Button text
  </div>
</div>

<div style="border: 1px solid black; margin-top: 10px;">
  <!-- 滚动容器 -->
  <div style="height: 500px; max-height: 500px; overflow-y: auto;">
    <div style="width:100%;">
      <svg x="0" y="0" width="100%" height="800">
        <rect x="0" y="0" width="100%" height="800" fill="gold"></rect>
      </svg>
    </div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者marielle