文章來自另一篇文章？

Question

我有下面的圖片幻燈片，我的問題是，本文下面的文章是關於這篇文章，並坐在它上面，我哪裏錯了？幻燈片本身工作正常，所以沒有問題。

HTML：

<article class="c-all b-all a-all mainImageArticle fade-in one"> 
<section class="image-slider"> 
    <div class="fadein"> 
     <img id="f3" src="landing_image.jpg" alt="Image"/> 
     <img id="f2" src="landing_image.jpg" alt="Image"/> 
     <img id="f1" src="landing_image.jpg" alt="Image"/> 
    </div> 
</section> 
</article> 

CSS：

.mainImageArticle { 
    position: relative; 
} 

.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; 
} 

Answer 1

由於沒有例子，很難清楚地看到發生了什麼，如果你是要建立一個的jsfiddle或codepen我們也許能夠進一步幫助。

但是，也就是說，您可能需要給滑塊容器image-slider一個高度。從該代碼看來，它內部的東西是絕對定位的，這意味着它的容器不知道它是自己的高度。導致下面的任何東西移動到它的位置。

Answer 2

我用你的代碼做了一個jsFiddle，並且只給你添加了一個類。

http://jsfiddle.net/7yyuhk03/

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; 
} 

我只是增加了一個類的圖像和與和高度給它分配。

下面是HTML

<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>