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

我尝试将交叉淡入淡出图像添加到此处获取的页面代码： 它可以工作，但由于图像的绝对位置-img.top和img.bottom css，它出现在文本后面或文本上方，进入另一个div:about。 当我移除绝对位置时，它在另一个文本div附近浮动正常，但是图片不会交叉褪色，因为它们是一个挨着另一个的，而不是绝对的一个挨着另一个。 所以使用绝对值可能是必须的，但我需要它相对于其他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>

---

我今天也遇到了同样的问题，找到了“解决方案”。试试这个，添加另一个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>

我希望这有帮助

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

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