Bootstrap divs not stacking right

Question

我有两个div，.container类没有正确堆叠。相反，它们重叠。

这是我的代码：

HTML

<div id="crossfadingImages" class="container"> 
    <img src="./media/..." class="bottom img-responsive" alt="..."/> 
    <img src="./media/..." class="top img-responsive" alt="..."/> 
</div> 

<div id="about" class="container"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <p>about...</p> 
     </div> 
     <div class="col-sm-6"> 

     </div> 
    </div> 
</div> 

CSS

#crossfadingImages{ 
    position: relative; 
    width: 100%; 
    padding: 0; 
    margin-top: 55px; 
} 
#crossfadingImages img{ 
    position: absolute; 
    left: 0; 
    -webkit-transition: opacity 3s ease-in-out; 
    -moz-transition: opacity 3s ease-in-out; 
    -o-transition: opacity 3s ease-in-out; 
    transition: opacity 3s ease-in-out; 
} 
#crossfadingImages img.top:hover{ 
    opacity: 0; 
} 

我认为这个问题是在crossfadingImages DIV图像的绝对位置。 请提供您的解决方案，以及我的问题以及解释。

Answer 1

然后你可以在你的hover()功能

$(document).ready(function() { 
 
    $('#crossfadingImages img').hover(function() { 
 
     $('#crossfadingImages img:first-child').stop().fadeOut(500); 
 
     $('#crossfadingImages img:last-child').stop().fadeIn(500); 
 
    }, 
 
    function() { 
 
     $('#crossfadingImages img:first-child').stop().fadeIn(500); 
 
     $('#crossfadingImages img:last-child').stop().fadeOut(500); 
 
    }); 
 
});

#crossfadingImages { 
 
    width: 100%; 
 
    padding: 0; 
 
    margin-top: 55px; 
 
    top: 0; 
 
    display: block; 
 
} 
 
#crossfadingImages img { 
 
    position: absolute; 
 
    width: 45%; 
 
    left: 0; 
 
} 
 
#crossfadingImages img:last-child { 
 
    display: none; 
 
} 
 
#about{ 
 
    position:relative; 
 
    top:80px; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="crossfadingImages" class="container"> 
 
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive" alt="..." /> 
 
    <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive" alt="..." /> 
 
</div> 
 

 
<div id="about" class="container"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <p>about...</p> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

好吧，我设法通过只使用CSS来解决这个问题。

注意：这只有在您有两张相同尺寸的图像（JPG或JPEG格式）时才有效。如果它们大小不一样，那么底部图像将一直显示，因为我们只是在改变顶部图像的不透明度。

#crossfadingImages{ 
 
\t position: relative; 
 
\t width: 100%; 
 
\t padding: 0; 
 
\t margin-top: 55px; 
 
} 
 
#crossfadingImages img{ 
 
\t left: 0; 
 
     width: 45%; 
 
\t -webkit-transition: opacity 3s ease-in-out; 
 
\t -moz-transition: opacity 3s ease-in-out; 
 
\t -o-transition: opacity 3s ease-in-out; 
 
\t transition: opacity 3s ease-in-out; 
 
} 
 
#crossfadingImages img.top:hover{ 
 
\t opacity: 0; 
 
} 
 
.bottom-image{ 
 
\t position: absolute; 
 
} 
 
.top-image{ 
 
\t position: relative; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div id="crossfadingImages" class="container"> 
 
\t <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" class="bottom img-responsive bottom-image" alt="..."/> 
 
     <img src="https://upload.wikimedia.org/wikipedia/commons/4/4a/Logo_2013_Google.png" class="top img-responsive top-image" alt="..."/> 
 
</div> 
 
\t  
 
<div id="about" class="container"> 
 
\t <div class="row"> 
 
\t \t <div class="col-sm-6"> 
 
\t \t \t \t <p>about...</p> 
 
\t \t </div> 
 
\t   <div class="col-sm-6"> 
 
\t \t \t \t 
 
\t   </div> 
 
     </div> 
 
</div>