jQuery轮播Div重叠问题求助：图片切换时错位如何解决？

嘿，作为jQuery新手遇到这个问题太正常啦！我来给你把问题讲明白，再给个超简单的解决方案：

问题根源 #

你现在的轮播里，每个包裹图片的<div>都是默认的块级元素，它们会垂直依次排列。当第一张图开始淡出（还没完全消失）时，第二张图已经开始淡入，这时候两个div同时占着垂直空间，就会把第一张挤下去，出现偏移重叠的情况。

一步到位的解决方案 #

核心思路就是让所有轮播的div重叠在同一个位置，这样淡入淡出时就不会互相挤位置了。只需要加几行CSS就行：

1. 给父容器设置相对定位

让#slideshow成为子元素定位的参考基准：

#slideshow {
  position: relative;
  padding-top: 10px;
  text-align: center; /* 注意你原来写的content-align是无效的，应该用text-align */
}

2. 让所有轮播子div绝对定位

这样它们都会叠在父容器的同一个位置，不会互相挤占空间：

#slideshow > div {
  position: absolute;
  top: 10px; /* 和父容器的padding-top保持一致，避免整体偏移 */
  left: 0;
  width: 100%;
  text-align: center;
}

完整可运行代码示例

HTML（整合样式后）：

<div id="slideshow" style="position: relative; padding-top:10px; text-align:center">
  <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center;">
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
  <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center;">
    <img src="https://sl.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif">
  </div>
  <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center;">
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
  <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center;">
    <img src="https://sl.glitter-graphics.net/pub/369/369220a3hjk9pcg9.gif">
  </div>
  <div style="position: absolute; top: 10px; left: 0; width: 100%; text-align: center;">
    <img src="https://sl.glitter-graphics.net/pub/549/549062c91it46lgr.gif">
  </div>
</div>

jQuery（你的代码完全不用改，直接用）：

$("#slideshow > div:gt(0)").hide();
setInterval(function() {
  $('#slideshow > div:first')
    .fadeOut(1000)
    .next()
    .fadeIn(1000)
    .end()
    .appendTo('#slideshow');
}, 5000);

原理说明 #

绝对定位的元素会脱离正常文档流，不会占据页面空间，所以所有轮播div都会精准叠在父容器的同一个位置。当第一张淡出、第二张淡入时，它们是在同一个位置上切换，自然就不会出现挤下去的情况啦！

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