html - CSS Z-index毛刺层

我正在创建一个具有嵌入式视频背景的登录页面，因此我将其z-index设置为低于导航栏，页脚等。但是，当这样做时，视频顶部的图层会出现故障表示有时不显示。我以为可以通过为视频分配负Z索引来解决此故障。这可以解决毛刺问题，但视频层无法单击。不知道是什么问题，非常感谢您的帮助。

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

最佳答案

请查看下面的代码片段以及该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>