Jquery 将一个div置于另一个div之上

我在另一个div中有两个div（

#video wrapper

）

html:

现在看起来是这样的：

我想要实现的是隐藏

#视频描述

，并在单击

.video info

时将其显示在

#视频缩略图

上方。我如何做到这一点？非常感谢您的帮助和指导。多谢各位

更新

这是我希望在单击信息之前的外观：

当它被点击时是这样的：

**更新** 应用

position:absolute

时，如果字母表较少，则

.video description

宽度会缩小：

---

在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();
});

---

您可以使用jQuery来实现这一点

请尝试以下代码：

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

});

---

希望能有帮助

您可以通过一些简单的方法来实现这一点

我为您创建了两个示例：

其中我使用以下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。如果仔细研究代码，您应该能够自己复制效果。不要忘记

要显示信息，您可以使用jQuery实现，要在缩略图上方显示信息，您可以使用CSP中的position:absolute实现。请显示您拥有的信息tried@charlietfl我尝试过使用溢出：hiddedI尝试过使用

位置：绝对，但是
.video description
的宽度会随着字数的减少而缩小。我已经用图像更新了。正因为如此，我设置了
width:100%同样。如果我将宽度设置为100%，宽度超过父div。我更新我的答案，尝试：）是，看起来不错。但我正在尝试为
.video description
实现与
相同的
视频缩略图宽度。我该怎么做？最后，在你的代码中，最好使用
$（this）
，因为它也会有其他视频。它真的很有趣。但是我使用bootstrap使用它的
col
类来获得一个响应页面。也许这不是你想要的，但我喜欢答案的显示方式。@Kakar如果你做一些小的调整，这段代码也应该使用bootstrap。@AlvaroFlañoLarrondo谢谢你，先生：）
jQuery(".video-description").on('click',function(){
  jQuery(".video-description").insertBefore(jQuery(".video-thumbnail"));

});

// 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;
        }
    });
});