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

以下是解决问题的方法：

在z-index: 1;上设置gn-menu-main。通常情况下，我还会告诉您将position设置为static以外的其他内容，否则z-index将无法生效。但是，查看site you linked，您似乎已将其设置为fixed，这很好。
在容器div中换行@RenderBody()并在其上设置position: relative;。相对定位确保容器div的子元素都不能与其兄弟元素重叠，除非div本身 - 而且我们知道它不会因为它的唯一兄弟（gn-menu-main）{ {1}}。

Answer 2

尝试调整＆＃34; gn-menu-wrapper＆＃34;的z-index。类。

例如： -

.gn菜单-包装{z索引：1}

如果这不起作用，请为z-index添加更多值。

.gn菜单-包装{z索引：99999}

Answer 3

我已经解决了你的问题。

您只需在

中添加“ z-index：1 ”即可

<强> COMPONENT.CSS

行号 - 96

类 - .gn-menu-wrapper

添加 - z-index：1

这是有效的，请参阅截屏

Answer 4

＆＃13;

<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 -->

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/component.css" />
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/classie.js"></script>
<script src="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/js/gnmenu.js"></script>
<script>
    new gnMenu(document.getElementById('gn-menu'));
</script>

＆＃13;

如何使用侧边栏重叠图像

4 个答案: