CSS使用position:absolute属性导致多张img图片堆叠显示如何解决

问题根源 #

你的判断完全正确，问题核心是.center类的绝对定位参考上下文错误：

• position: absolute属性的元素，偏移值会以最近一级设置了非static定位（relative/absolute/fixed/sticky）的父元素为计算基准
• 你代码中的.tiktok类使用默认的position: static，不满足定位参考要求，因此所有.center类图片都向上寻找到了设置了position: relative的顶层.container作为参考，全部堆叠在整个容器的中心位置。

解决方案 #

仅需给.tiktok类添加position: relative属性，让每个子元素的绝对定位以自己所属的.tiktok容器为基准即可，修改后的.tiktok代码如下：

.tiktok {
  height: 100%;
  width:100%;
  background-color: black;
  scroll-snap-align: start;
  /* 新增以下一行代码 */
  position: relative;
}

额外优化提示：你当前.container的CSS中重复定义了两次scroll-snap-type，可以删除冗余的scroll-snap-type: mandatory;，仅保留scroll-snap-type: y mandatory;即可。

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