Абсолютное позиционирование кроссфейдовых изображений внутри относительного позиционированного div не работает

Question

Я пытаюсь добавить изображения перекрестного затухания на страницу (код, взятый отсюда: cross fade images он работает, но из-за абсолютного положения изображений 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> 

---

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