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

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;
}