Question

尝试使用三个全屏background overlays制作网站菜单，但该菜单中的背景视频（基础）向下移动。定位标记有什么问题？

CSS：

.videoContainer {
    position: relative;
    width: 100%;
    height: 100%;
    //padding: 20px;
    border-radius: 1px;
    overflow: hidden;
}
.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: relative;
    z-index: -5;
}
.videoContainer .overlay-vid-1 {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    background: black;
    opacity: 0.5;
}

P.S。 - 尝试使用z-index，position:和<div>进行重新排序，但没有运气。

P.p.s。 - 是的，我知道，这不是整个代码，但是系统告密者说我不能粘贴整个代码，所以有一个指向codepen的链接，谢谢。

Answer 1

您需要将视频的位置更改为position: absolute;，因为它被.overlay-content推下。尝试将CSS更改为如下所示：

<强> CSS

.videoContainer video {
    min-width: 100%;
    min-height: 100%;
    position: absolute; /* Change to absolute */
    top: 0px;           /* Set top to 0px */
    z-index: -5;
}

Updated CodePen

背景视频图层定位有什么问题？

1 个答案: