全屏视频下添加内容-定位

Question

我想在整页视频下方添加内容。但是添加时，内容会填充到视频上方而不是下方。

所以，我要找的是：

但是我得到的是视频中的文字：jsFiddle

HTML

<div id="video-container">
<video id="bgVid" loop class="fillWidth" autoplay poster="<?php echo bloginfo( 'template_directory' ) . '/images/ship-bg.jpg'; ?>" alt="ship cargo">
<source src=video/science.mp4 type=video/mp4>
</video> 
</div>

<div id="underneath">   
<p style="color:#fff">content underneath</p>
</div>

CSS

#video-container {
    position: absolute;
}
#video-container {
    top:0%;
    left:0%;
    height:100%;
    width:100%;
    overflow: hidden;

}
video#bgVid {
    position:absolute;
    z-index:-1;
    background: url('../images/ship-bg.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}
video#bgVid.fillWidth {
    width: 100%;
}

我尝试过，玩过，但失败了。谁能指点一下。

JSFiddle

非常感谢。

Answer 1

试试这个

#underneath{
position:relative;
z-index:-2;
}

Answer 2

试试这个，

#video-container {
    position: relative;

}

Demo

全屏视频下添加内容-定位

Adding content under full screen video - Positioning

css

layout

css-position

fullscreen