CSS淡入淡出滑块异常：所有图片指向第4张的标题与链接

问题现象 #

制作的CSS淡入淡出滑块出现异常：所有图片的跳转链接和标题均显示为第4张图片的对应内容，点击任意位置都只会触发第4张图的链接。

核心原因 #

父容器.fade-slider-1未设置position: relative，但子元素使用了position: absolute。绝对定位元素在没有相对定位父容器的情况下，会相对于整个文档流定位，导致4个滑块层完全重叠。尽管通过opacity控制了显示状态，但最上层（第4个滑块）的可交互区域会完全覆盖下方所有滑块，因此无论点击哪个视觉上的图片，实际触发的都是最上层的链接和标题。

修复方案 #

给父容器.fade-slider-1添加position: relative属性，让子元素的绝对定位相对于父容器生效，确保每个滑块的可交互区域仅作用于自身层级。

修改后的CSS代码 #

.fade-slider-1 {
  width: 250px;
  height: 250px;
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
  position: relative; /* 启用相对定位，修正子元素绝对定位的参照 */
  margin: 0 auto;
}

.fade-slider-1>div {
  position: absolute;
  animation: move_slide2 16s infinite;
  opacity: 0;
}

.fade-slider-1>div:nth-child(1) {
  animation-delay: 0;
}

.fade-slider-1>div:nth-child(2) {
  animation-delay: 4s;
}

.fade-slider-1>div:nth-child(3) {
  animation-delay: 8s;
}

.fade-slider-1>div:nth-child(4) {
  animation-delay: 12s;
}

@keyframes move_slide {
  10% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
}

@keyframes move_slide2 {
  25% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
}

验证效果 #

修改后，每个滑块的跳转链接和标题会对应自身图片内容，点击不同视觉阶段的图片会触发正确的链接，淡入淡出动画不受影响。

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