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

Question

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

有人知道如何解决吗？

<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 作为一个更大的盒子，并在那里添加相同的图片。然后将此 div 作为相对，并将 'cf' 和 cf img 作为绝对。像这样的东西..我不使用 float 所以我不能保证它会像我一样工作..但希望它能。

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