把div放在另一個div上面

Question

我在另一個div裏面有兩個div（#video-wrapper）。

HTML：

<div class="row"> 
    <div class="video-wrapper col-lg-2"> 
     <div class="video-thumbnail"> 
      <img src="img/img.jpg"> 
      <span class="glyphicon glyphicon-play video-play"></span> 
      <span class="glyphicon glyphicon-info-sign video-info"></span> 
     </div> 
     <div class="video-description"> 
      <p class="title">See and Sea...</p> 
      <div class="video-upload-info"> 
       <p class="by">Franschisil</p> 
       <p class="pubdate">4 days ago</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

.video-wrapper { 
} 

.video-thumbnail { 
    position: relative; 
    height: 110px; 
    box-shadow: 0px 0px 10px 0px; 
} 

.video-description { 
    height: 100px; 
    background-color: white; 
    padding: 5px; 
    word-wrap: break-word; 
    opacity: 0.9; 
} 

現在看起來是這樣的：

我想實現的是隱藏#video-description，並diplay它在#video-thumbnail以上時爲點擊了。我如何實現這一目標？您的幫助和指導將非常感謝。謝謝。

更新

這是我希望它看起來像之前我點擊了信息：

而當其點擊是這樣的：

**更新** 當應用position:absolute的.video-description寬度尺寸縮小，如果有較少的字母：

Answer 1

您需要在CSS是這樣的：

.video-wrapper{ 
    position: relative; 
    box-shadow: 0px 0px 10px 0px; 
    overflow: hidden; 
} 

.video-description { 
    position: absolute; 
    display: none; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 

.video-info{ 
    position: relative; 
    z-index: 1; 
} 

的jQuery：

$('.video-info').click(function(){ 
    $('.video-description').fadeToggle(); 
}); 

DEMO

Answer 2

可以使用jQuery來實現這個

試試下面的代碼：

jQuery(".video-description").on('click',function(){ 
    jQuery(".video-description").insertBefore(jQuery(".video-thumbnail")); 

}); 

希望它可以幫助...！

Answer 3

你可以通過一些簡單的jQuery來實現這一點。

我創建了兩個例子給你：

DEMO 1

DEMO 2

當我用下面的jQuery：

// DEMO 1 
$(document).ready(function() { 
    $('.info').click(function() { 
     $('.video-description').slideToggle();   
    }); 
}); 

// DEMO 2 
$(document).ready(function() { 
    var clicked = false; 
    $('.info').click(function() { 
     $('.overlay').slideToggle(); 
     if (!clicked) { 
      $('.info').animate({top: "115px"}, 500); 
      clicked = true; 
     } else { 
      $('.info').animate({top: "0px"}, 500); 
      clicked = false; 
     } 
    }); 
}); 

在這兩個演示中，您將找到所有必需的HTML，CSS和jQuery。如果仔細研究代碼，您應該可以自己複製效果。不要忘了include jQuery in your document.