GIF无法移动，寻求居中于上方两张图片间的解决方案

问题根源 #

你给.image3设置的right属性不生效，是因为默认情况下元素的position属性为static，这种定位模式不支持left/right/top/bottom这类偏移属性。必须将元素设置为relative、absolute或fixed定位，偏移属性才会生效。

解决方案一：绝对定位（精准控制位置） #

利用父元素figure已设置的position: relative，给GIF设置绝对定位，让它基于figure容器定位到两张图片的中间：

修改后的CSS代码：

/* Img*/
figure {
  position: relative;
  top: 1200px;
  right: -200px;
  /* 给容器设置宽度，避免宽度塌陷 */
  width: 1000px;
}

figure:before,
figure:after {
  content: '';
  left: 500px;
  position: absolute;
}

img {
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.image3 {
  border-radius: 20px;
  /* 开启绝对定位 */
  position: absolute;
  /* 计算中间位置：两张图总宽1000px，GIF宽700px，左右各留150px */
  left: 150px;
  top: 0;
  /* 确保GIF显示在两张图上方 */
  z-index: 1;
}

解决方案二：Flex布局（简洁居中） #

如果希望GIF在布局上自然与两张图居中对齐，可以用Flex布局重构：

修改后的CSS代码：

/* Img*/
figure {
  position: relative;
  top: 1200px;
  right: -200px;
  /* 启用Flex布局 */
  display: flex;
  justify-content: center;
  width: 1000px;
}

figure:before,
figure:after {
  content: '';
  left: 500px;
  position: absolute;
}

img {
  border-radius: 10px;
  margin: 0;
  padding: 0;
}

.image3 {
  border-radius: 20px;
  /* 可选：让GIF覆盖在两张图中间，根据需求调整 */
  position: absolute;
}

说明 #

• 方案一适合需要精准控制GIF位置，甚至让GIF覆盖在两张图中间的场景；
• 方案二更适合布局上的自然居中，代码更简洁。

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