相对定位的div内的绝对定位交叉淡入淡出图像不起作用

Question

我尝试向页面添加交叉淡入淡出图像（代码取自此处：cross fade images 它可以工作，但是由于图像的绝对位置- img.top 和 img.bottom (css) 它出现在文本的后面或上面（进入另一个 div：about）。 当我删除绝对位置时，它可以在另一个文本 div 附近浮动，但图片不会很好地交叉淡入淡出，因为它们彼此靠近，而不是绝对在另一个上。 所以使用 absolute 可能是必须的，但我需要它相对于其他 div 浮动而不是进入它们。

有人知道如何解决吗？

<div id="cf">
    <img class="bottom" src="style/images/1.jpg" id="pic1">
    <img class="top" src="style/images/2.jpg" id="pic2">
</div>
<div id="about" class="body_text">
     a lot of text
</div>

---

and the css:
#cf {
    position:relative;
    float:left;
    margin:0 auto;
    background-color:black;
}
img.top, img.bottom{
    position:absolute;
    width:100px;
    height:100px;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}
@keyframes cf_animation {
    0% {
        opacity:1;
    }
    40% {
        opacity:1;
    }
    60% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
#cf img.top {
animation-name: cf_animation;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 8s;
animation-direction: alternate;
}
#about{
position:relative;
    float:top;
}

Answer 1

我今天遇到了同样的问题并找到了一个“解决方案”。试试这个，添加另一个 div 作为一个更大的 box ，然后在那里添加相同的图片。然后将此 div 作为相对值，并将 'cf' 和 cf img 作为绝对值。像这样的东西..我不使用浮动，所以我不能保证它会像它对我一样工作..但希望它可以。

<div id="container">
<img class="bottom" src="style/images/1.jpg" id="pic1">
<div id="cf">
<img class="bottom" src="style/images/1.jpg" id="pic1">
<img class="top" src="style/images/2.jpg" id="pic2">
</div>
</div>

<div id="about" class="body_text">
a lot of text
</div>

和 CSS

#container {
position:relative;}

#cf {
position:absolute;
float:left;
margin:0 auto;
background-color:black;}

img.top, img.bottom{
position:absolute;
width:100px;
height:100px;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;}