html - CSS z-index 故障层

Question

我正在创建一个带有嵌入式视频背景的着陆页，因此我将其 z-index 指定为低于导航栏、页脚等的 z-index。但是当我这样做时，视频顶部的图层非常有问题，这意味着它们有时不会出现。我想我可以通过为视频分配一个负 z-index 来解决这个问题。这有效并解决了故障问题，但视频层变得不可点击。不确定问题出在哪里，非常感谢您的帮助。

HTML:

<nav>
    <ul style="display: inline-block; padding-top: 15px; padding-bottom: 10px; padding-left:20px; padding-right:30px;">
        <a href="{{store_url}}">
            {{#logotype}}
            <img src="{{url-2000}}" alt="{{store_name}}">
                {{/logotype}}
        </a>
    </ul>
    <ul style="display: inline-block;">
        <li><a href="http://blue-dove.org/products/start-up-collection/all">All</a>
        </li>
        <li><a href="http://blue-dove.org/products/start-up-collection/men">Men</a>
        </li>
        <li><a href="http://blue-dove.org/products/start-up-collection/women">Women</a>
        </li>
    </ul>
</nav>
<div id="bg_container">
    <iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=opaque&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>

CSS:

#bg_container {
    height:700px;
    overflow:visible;
}
#bg {
    width:100%;
    height:1200px;
    position: fixed;
    top: -50%;
    z-index:1;
}
#content {
    position:absolute;
    top:0px;
    padding:30px;
    color:#FFF;
    text-shadow:#000 2px 2px;
}
.transparent {
    background-color:rgba(0, 0, 0, 0.8);
    position: relative;
    z-index:10;
}
.nav {
    background-color:rgba(0, 0, 0, 0.5);
    position: relative;
    z-index:10;
}

Answer 1

查看下面的代码片段和这个 fiddle .

#bg_container {
    height:700px;
    overflow:visible;
    z-index:0;
}
#bg {
    width:100%;
    height:1200px;
    position: fixed;
    top: -50%;
}
#content {
    position:absolute;
    top:0px;
    padding:30px;
    color:#FFF;
    text-shadow:#000 2px 2px;
    z-index:1;
}
nav {
    background-color:rgba(0, 0, 255, 0.5);
    position: relative;
}
ul {
    display: inline-block;
}
.logo {
    height:30px;
}

<div id="bg_container">
    <iframe id="bg" src="//www.youtube.com/embed/wO_xhHf-OgM?wmode=transparent&amp;autoplay=1&amp;rel=0&amp;controls=0&amp;showinfo=0&amp;vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
<div id="content">
    <nav>
        <ul>
            <a href="somesite.com"><img class="logo" src="https://chillix.files.wordpress.com/2009/10/android-logo-small.gif" alt="android" /></a>
        </ul>
        <ul>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/all">All</a>
            </li>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/men">Men</a>
            </li>
            <li>
                <a href="http://blue-dove.org/products/start-up-collection/women">Women</a>
            </li>
        </ul>
    </nav>
</div>