如何让带滚动的relative容器内的伪元素始终固定在底部？

核心问题在于：默认情况下，容器的伪元素属于内容流的一部分，使用absolute定位时会随内容滚动；fixed会脱离容器视口；sticky仅在内容溢出滚动到末尾时才会固定，无法始终停留在容器底部。

可行解决方案 #

通过容器的padding-bottom预留遮罩空间，结合absolute定位让伪元素固定在容器的可视底部，完全脱离内容流：

/* 滚动容器 */
.scroll-container {
  position: relative;
  width: 300px; /* 示例宽度，可按需调整 */
  height: 400px; /* 示例高度，可按需调整 */
  overflow-y: auto;
  box-sizing: border-box; /* 确保padding包含在容器高度内 */
  padding-bottom: 50px; /* 与遮罩高度一致，为遮罩预留位置 */
}

/* 底部渐变遮罩伪元素 */
.scroll-container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50px; /* 遮罩高度，需与padding-bottom一致 */
  /* 白透渐变，可根据需求调整透明度和方向 */
  background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
  pointer-events: none; /* 让遮罩不阻挡下方内容的点击/交互 */
}

原理说明 #

1. box-sizing: border-box：让容器的height属性包含padding，避免容器总高度因padding-bottom被额外撑开。
2. padding-bottom: 50px：为遮罩预留固定高度的空间，确保容器内的内容不会被遮罩遮挡，同时让伪元素的absolute定位点落在容器的可视底部。
3. position: absolute：伪元素相对于relative的容器定位，bottom: 0使其固定在容器底部，不随内容滚动。
4. pointer-events: none：避免遮罩层拦截内容的鼠标事件，保证交互操作正常。

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