HTML 视频覆盖部分下推视频答案

【问题标题】：HTML video overlay partially pushing down videoHTML 视频覆盖部分下推视频
【发布时间】：2016-11-15 18:43:13
【问题描述】：

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

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

（顺便说一句，后面会用jquery隐藏第二个div，这样第一个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>

这是一个查看完整图片的小提琴： https://jsfiddle.net/boe5xLte/2/

【问题讨论】：

如果我理解正确你错过了：.overlaycontent { height: 0;} 或更好地使用position: absolute

标签： html css video iframe

【解决方案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;
}

我相应地更新了你的小提琴：https://jsfiddle.net/boe5xLte/3/

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

【讨论】：