纯CSS实现滚动容器上下固定伪元素背景问题求助

我编写的代码已接近完成，但在向下滚动#container容器时，黄色的::before伪元素与红色的::after伪元素无法固定在容器的顶部和底部。我期望在上下滚动容器内容的过程中，这两个伪元素能始终保持可见。我猜测是position属性的设置存在问题，可能需要对CSS代码做一些细微调整，恳请各位提供技术帮助。

我的代码： #

CSS代码：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 80px 40px;
}

#container {
  margin: 0 auto;
  max-height: 300px;
  height: 100%;
  position: relative;
  overflow-y: scroll;
}

.images {
  border: 5px solid yellow;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 20px;
}

.img {
  height: 100px;
  border-radius: 5px;
}

#container::before,
#container::after {
  content: '';
  position: absolute;
  height: 30px;
  width: 100%;
}

#container::before {
  top: 0;
  background: yellow;
}
#container::after {
  bottom: 0;
  background: red;
}

HTML代码：

<div id="container" style="border: 5px solid red;">
  <main class="images">
    <div class="img div_1" style="background: green;"></div>
    <div class="img div_2" style="background: green;"></div>
    <div class="img div_3" style="background: green;"></div>
    <div class="img div_4" style="background: green;"></div>
  </main>
</div>

解决方案 #

问题出在滚动容器的层级和定位逻辑上：当前#container既是定位父元素又是滚动容器，伪元素虽然是绝对定位，但滚动时内容会覆盖伪元素，且容器自身的滚动逻辑会导致伪元素的“固定”效果不符合预期。以下是两种调整方案：

方法一：提升伪元素层级，避免被内容覆盖 #

给伪元素添加层级属性，确保它们显示在内容上方：

#container::before,
#container::after {
  content: '';
  position: absolute;
  height: 30px;
  width: 100%;
  z-index: 1; /* 提升伪元素层级 */
}

.images {
  border: 5px solid yellow;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 20px;
  position: relative; /* 给内容容器添加定位上下文 */
  z-index: 0; /* 确保内容层级低于伪元素 */
}

方法二：拆分滚动容器与定位容器（更稳妥） #

把滚动逻辑转移到内部的.images容器，让#container只作为定位父容器，伪元素就能稳定固定在容器的可视区域：

#container {
  margin: 0 auto;
  max-height: 300px;
  height: 100%;
  position: relative;
  /* 移除原有的overflow-y: scroll */
}

.images {
  border: 5px solid yellow;
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding: 20px;
  overflow-y: scroll; /* 让内容容器负责滚动 */
}

两种方法都能实现需求：滚动内容时，黄色顶部伪元素和红色底部伪元素始终固定在#container的顶部和底部，保持可见。

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