html - 如何让侧边栏重叠图像

Question

我用过这个教程http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/在我的 _Layout 代码中创建一个侧边栏。我试图让侧边栏与 RenderBody() 中的任何内容重叠。当侧边栏在手机上打开时，它出现在图像后面。

图像描述问题:http://snag.gy/uN9GF.jpg

我的 body 示例代码可以在这里找到 http://codepen.io/anon/pen/NxLvEQ

_Layout.cshtml代码

<div class="container">
    <ul id="gn-menu" class="gn-menu-main">
        <li class="gn-trigger">
            <a class="gn-icon gn-icon-menu"><span>Menu</span></a>
            <nav class="gn-menu-wrapper">
                <div class="gn-scroller">
                    <ul class="gn-menu">
                        <li class="gn-search-item">
                            <input placeholder="Search" type="search" class="gn-search">
                            <a class="gn-icon gn-icon-search"><span>Search</span></a>
                        </li>
                        <li>
                            <a class="gn-icon gn-icon-download">Popular</a>
                        </li>
                        <li><a class="gn-icon gn-icon-cog">Settings</a></li>
                        <li><a class="gn-icon gn-icon-help">About us</a></li>
                    </ul>
                </div><!-- /gn-scroller -->
            </nav>
        </li>
        <li><a href="http://tympanus.net/codrops">Test Sidebar</a></li>
        <li></li>
    </ul>

     @RenderBody()
</div><!-- /container -->
<script src="../../Scripts/classie.js"></script>
<script src="../../Scripts/gnmenu.js"></script>
<script>
    new gnMenu(document.getElementById('gn-menu'));
</script>

Answer 1

解决问题的方法如下:

1. 在 gn-menu-main 上设置 z-index: 1;。通常，我还会告诉您将其 position 设置为 static 以外的值，否则 z-index 将无效。看着 site you linked ，不过，您似乎已经将其设置为 fixed，这很好。
2. 将@RenderBody() 包裹在容器div 中，并在其上设置position: relative;。相对定位确保容器 div 的任何子元素都不能与其兄弟元素重叠，除非 div 本身重叠——我们知道它不会，因为它唯一的兄弟元素 (gn-menu-main) 有z-index: 1;.