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