Я использую Foundation и ".responsive-embed" видео, у меня есть наложение мобильного меню, которое находится сверху.Тем не менее, я обнаружил, что если это определено перед видео (как в заголовке), свойства, которые я ожидаю, что z-index поместит это наложение сверху, не будут работать.
Я не могу понятьпочему те же значения, примененные после разметки, достигают желаемого результата.Как я могу сделать красное наложение сидя на вершине?
[Ссылка 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;
}