基金会的“响应嵌”的视频出现在顶部覆盖的 - 为什么？

Question

我使用基金会和“.responsive-嵌入”的视频，我有一个在上面坐着一个移动菜单覆盖。但是我发现，如果（在标题等）的视频前定义我期望的z-index放置此叠加在上面不工作的性质。

我不明白为什么，在标记后应用相同的值达到预期的效果。我怎样才能让红色覆盖坐在ontop的？

[Codepen链接]（https://codepen.io/onlinechris/pen/VgWvab）

<div class="overlay">
</div>

<div class="grid-x grid-padding-x">

  <div class="small-6 cell">
    <div class="responsive-embed widescreen">
      <iframe width="420" height="315" src="https://www.youtube.com/embed/mM5_T-F1Yn4" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>

<div class="overlay--blue"></div>


.overlay {
  position:absolute;
  height:100vh;
  width:100vw;
  display:flex;
  background: red;
  top:0;
  left:0;
}

.overlay--blue { 
  position:absolute;
  height:50vh;
  width:100vw;
  display:flex;
  background: blue;
  top:0;
  left:0;
}

Answer 1

尝试添加一些z-index您.overlay。

https://codepen.io/DanielRuf/pen/VgWaom