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>