看完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/
最佳答案
您想要一个始终覆盖在视频上但不会因为其自身(或其子级)尺寸而以某种方式“移动”它的包装器。
您已经将 .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
的同一站点。
关于HTML 视频覆盖部分下推视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38347252/