HTML 视频覆盖部分下推视频

Question

看完some answers在堆栈上，我设法为我的 youtube 视频制作了一个 div 叠加层。描述说它可以让我在构造的 div 中添加尽可能多的 div，这对我来说很有意义。

但是，我放入的第二个 div 向下推了我的视频。我尝试调整位置和 z-index 但这没有帮助。为什么只有一个 div 将视频向下推？父 div 不应该确保它们都悬停在视频上吗？

(顺便说一下，第二个 div 稍后会用 jquery 隐藏，这样第一个 div 可以通过点击打开它。)

我将视频叠加层包装在容器中:

    .outer-container {
        width:68%;
        height:575px;
        margin-left:2%;
        background-color:#97D3A3;
        display:inline-block;
}
.inner-container {
    display: inline-block;
    position: relative;
    width: 100%;
    height: 100%;
}
.video-overlay {
    width:100%;
}
.video {
    width: 100%;
    height: 100%;
}

.overlaycontent {
    width:100%;
    height:100%;
    background-color:#fff;
    color:#000;
    position: relative;
    z-index: 98;
}

.overlayinfo {
        position: relative;
        z-index: 99;
        height: 0px;
        border-top: 4px solid #F1860B;
        width:100%;
        max-width:816px;
        text-align:center;
    }

    .overlayinfo img {
        margin:0px auto;
        width:53px;
    }

这是我的 HTML:

<div class="outer-container">
        <div class="inner-container">
            <div class="video-overlay">

                <div class="overlayinfo">
                    <a href="#" class="infotrigger"><img src="#"></a>
                </div>
                <div class="overlaycontent">
                    Lorem ipsum dolor sit amet
                </div>


            </div>
                <iframe class="video" width="100%" height="100%" src="https://www.youtube.com/embed/6ttrZ11csfI?autoplay=1&controls=0&loop=1&playlist=6ttrZ11csfI&showinfo=0&modestbranding=1" frameborder="0"></iframe>
        </div>
    </div>

这里有一个 fiddle 可以看到完整的图片: https://jsfiddle.net/boe5xLte/2/

Answer 1

您想要一个始终覆盖在视频上但不会因为其自身(或其子级)尺寸而以某种方式“移动”它的包装器。

您已经将 .inner-container 设置为 position: relative。现在您必须定位您的 .video-overlay 以便它移出内容流。您可以通过设置来实现它:

.video-overlay {
    /*to position it out of content-flow*/
    position: absolute;

    /*to span it to its parents borders*/
    top: 0; right: 0; bottom: 0; left: 0;

    /*to always let it be on top of your subsequent video container*/
    z-index: 1;
}

我相应地更新了您的 fiddle :https://jsfiddle.net/boe5xLte/3/

top、right、bottom 和 left 值可以调整，类似于此站点之间的距离.video-overlay 和 .inner-container 的同一站点。