如何使邊欄重疊圖像

Question

我已使用此教程http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/在我的_Layout代碼中創建邊欄。我試圖讓邊欄在RenderBody（）中重疊任何東西。當側邊欄在移動設備上打開時，它會出現在圖像後面。

圖片中描述的問題：http://snag.gy/uN9GF.jpg

我的身體的示例代碼可以在這裏找到 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. 集z-index: 1;上gn-menu-main。通常，我還會告訴您將其position設置爲static以外的其他值，否則z-index將不起作用。但看看site you linked，看起來你已經將它設置爲fixed，這很好。
2. 將@RenderBody()包裝在一個容器格中，並將它設置爲position: relative;。相對定位確保容器div的所有子元素都不能與其兄弟元素重疊，除非該div本身確實 - 我們知道它不會因爲其唯一的兄弟（gn-menu-main）具有z-index: 1;。

Answer 2

嘗試調整「GN-菜單的z-index包裝「類。

例如： -

.gn菜單-包裝{z索引：1}

如果這是不工作更值添加到z索引。

.gn菜單 - 包裝{z-index的：99999}

Answer 3

<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" /> 
 
\t \t <link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/GoogleNexusWebsiteMenu/css/demo.css" /> 
 
\t \t <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>

Answer 4

我已經解決了你的問題。

你只需要添加 「的z-index：1」 在

COMPONENT.CSS

行號 - 96

類 - .gn菜單包裝機

add - 的z-index：1

這是工作看到屏幕截圖