Z-index div重叠全屏vimeo wordpress

Question

在全屏播放视频时，我的wordpress网站的标题z-index在vimeo视频的顶部出现问题。

link：http://www.dylanhalpern.com/six-points-super-6/

我尝试在div中用绝对定位和高z-index包装i-frame，并将其包装在具有相对定位的div中。

css看起来像

.videowrap {
    position: relative;
    width: 400px;
    height: 250px;
    background-color: silver;
}
.video {
    position: absolute;
    z-index: 99999;
}

所以html看起来像：

<div class="videowrap">
 <div class="video">
  <iframe></iframe>
 </div> 
</div>

没有运气，任何帮助表示赞赏。谢谢！

Answer 1

我已在您的link上测试了此代码，但它确实有效。

.site-header{
   z-index: -100;
}

Answer 2

子元素位于其父元素中。所以你需要以某种方式改变父母的相对z-index（标题和视频的父母）。

换句话说，你的问题不是CSS没有给他们正确的z索引，而是你的videowrap div的z-index低于你的头的父级（可能是body所以你在那里运气不好。）

如果您的标题直接位于body下，请尝试将其包装在div中，然后将videowrap div的z-index设置为高于标题容器div（或您的包装中的任何元素）它在）。