在另一个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-info”时，隐藏“#video-description”，并将其显示在“#video-thumbnail”上方。我该如何实现？非常感谢您的帮助和指导。谢谢。

更新：

这是我想要在点击信息之前它看起来像什么：

当它被点击时会变成这样：

更新： 当应用position:absolute时，如果字母数量较少，则.video-description的宽度会缩小：

- Kakar

---

要显示信息，您可以使用jQuery实现；要在缩略图上方显示信息，您可以在CSS中使用position: absolute。 - Shehary

请提交您的代码，以便我们能够进一步检查和分析。 - charlietfl

@charlietfl 我确实尝试使用了overflow:hidden。 - Kakar

Answer 1

您可以通过一些简单的 jQuery 实现这一点。

我为您创建了两个示例：

{{链接1：演示1}}

演示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代码。如果你仔细研究这些代码，应该能够自己复制这些效果。不要忘记将jQuery包含在你的文档中。

- Jean-Paul

---

这真的很有趣。但是我正在使用Bootstrap来使用它的“col”类来获得响应式页面。 - Kakar

也许这不是您正在寻找的内容，但我喜欢答案展示的方式。 - Alvaro Flaño Larrondo

@Kakar 如果你进行一些小的调整，这段代码也应该可以与Bootstrap一起使用。 - Jean-Paul

@AlvaroFlañoLarrondo 謝謝您，先生 :) - Jean-Paul

Answer 2

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

演示

- lmgonzalves

---

我尝试使用position:absolute，但是如果单词较少，.video-description的宽度会缩小。我已经更新了图片。 - Kakar

因此，我也设置了 width: 100%;。 - lmgonzalves

如果我将宽度设置为100％，则宽度超出了父div。 - Kakar

我更新了我的回答，请尝试这个新的演示 :) - lmgonzalves

是的，看起来不错。但我想让.video-description和.video-thumbnail有相同的宽度。我该怎么做呢？最后，在你的代码中最好使用$(this)，因为它还有其他视频。 - Kakar

你只需要移除 padding: 5px;，然后在 jQuery 代码中使用 $(this).closest('.video-wrapper').find('.video-description').fadeToggle(); 演示。 - lmgonzalves

Answer 3

您可以使用jQuery来实现这个功能

尝试下面的代码：

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

});

希望这有所帮助....！

- Domain