Html 文章在另一篇文章的后面？

我有下面的图片幻灯片，我的问题是这篇文章下面的文章是在这篇文章的基础上出现的，并且放在上面，我哪里出了问题？幻灯片本身工作正常，因此没有问题

HTML:

---

没有任何例子，很难准确地看到发生了什么，如果您要创建一个JSFIDLE或codepen，我们可能会进一步提供帮助

---

但是，也就是说，您可能需要给滑块容器，

图像滑块

，一个高度。从代码上看，它里面的东西看起来是绝对定位的，这意味着它的容器不知道它自己的高度。使它下面的东西向上移动到它的位置。

我使用您的代码制作了一个JSFIDLE，只向您的代码中添加了一个类

CSS

.mainImageArticle {
  position: relative;
}
img {
    width: 250px;
    height: 160px;
}
.fadein img {
  position: absolute;
  top: 0;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

#f2 {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

#f3 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

我刚刚为图像添加了一个类，并为其指定了with和height

这是HTML文件

.mainImageArticle {
  position: relative;
}
img {
    width: 250px;
    height: 160px;
}
.fadein img {
  position: absolute;
  top: 0;
  -webkit-animation-name: fade;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 6s;
}

@-webkit-keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

@keyframes fade {
  0% {opacity: 0;}
  20% {opacity: 1;}
  33% {opacity: 1;}
  53% {opacity: 0;}
  100% {opacity: 0;}
}

#f2 {
  -webkit-animation-delay: -4s;
  animation-delay: -4s;
}

#f3 {
  -webkit-animation-delay: -2s;
  animation-delay: -2s;
}

<article class="c-all b-all a-all mainImageArticle fade-in one">
<section class="image-slider">
    <div class="fadein">
        <img id="f3" src="http://viralstash.net/wp-content/uploads/2014/03/521013543_1385596410.jpg" alt="Image"/>
        <img id="f2" src="http://wallpapertodays.com/wp-content/uploads/2014/06/Dogs-Wallpaper-Desktop.jpg" alt="Image"/>
        <img id="f1" src="http://9pixs.com/wp-content/uploads/2014/06/dog-pics_1404159465.jpg" alt="Image"/>
    </div>
</section>
</article>