Html 当我打开汉堡包菜单按钮时，如何使sidenav内容显示在所有其他页面内容的前面？

当你点击主菜单按钮打开sidenav时，我试图让sidenav内容显示其他内容，但是页面上的所有内容都与sidenav内容重叠，我尝试给它一个100的z索引，但它似乎不起作用，我不确定解决方案是什么，任何帮助都将不胜感激，谢谢

<div id="main">
      <button id="mainMenuButton" class="mainMenuButton" alt="mainMenuButton" onclick="openNav()" + onclick="closeNav()"><i class="fas fa-2x fa-bars"></i></button>  
    </div> <!-- main -->
  
    <div id="mySidenav" class="sidenav">
      <div id="closebtnposition">
        <a href="javascript:void(0)" class="closebtn" id="closebtn" onclick="closeNav()">&times;</a>
      </div> <!-- closebtnposition -->
  
      <div class="signin-sidenav">
        <a href="../Sign-in or Register/signin or register.php" class="signin-icon"><i class="far fa-user"></i></a>
        <h3 class="hello-sign-in-sentence"><a href="../Sign-in or Register/signin or register.php">Hello, Sign in</a></h3> 
      </div> <!-- signin-sidenav -->
  
      <!--menu button-->
      <div class="side-nav-hoverlinks">
        <br>
        <h4 class="menuinsidebtn"><strong>Menu</strong></h4>
        <br>
        <br>
        <a href="../Index (Home)/Index.php" id="homeActive" class="homeActive">Home</a>
        <a href="../Messages/Messages-inbox.php" id="MessagesActive">Messages</a>
        <a href="../Notifications/Notifications.php" id="NotificationsActive">Notifications</a>
        <a href="../Profile/Profile.php" id="ProfileActive">Profile</a>
        <br>
        <div id="my-world-linebreak">
        </div> <!-- my-linebreak -->
        <h4 class="insidebtn"><strong>My world</strong></h4>
        <br>
        <a href="#" id="ItemActive">Items</a>
        <a href="#" id="ListAnItemActive">List An Item</a>
        <a href="#">Perks & Achievements</a>
        <a href="#">Watch list</a>
        <a href="#" id="FavouritesActive" >Favourites</a>
        <a href="#" id="CategoriesActive">Categories</a>
        <a href="">Trade History</a>
        <br>
        <div id="help-and-settings-linebreak">
        </div> <!-- help-and-settings-linebreak -->
        <h4 class="helpandsettingsinsidebtn"><strong>Help & Settings</strong></h4>
        <br>
        <a href="../Legal info & policies/Legal info & policies.php">Legal Info & Policies</a>
        <a href="../Settings/Settings.php">Settings</a>
        <a href="../Help & Customer Service/Help & Customer Service.php">Help & Customer Service</a>
        <a href="../Sign out/Sign out.php">Sign Out</a>
      </div> <!-- side-nav-hoverlinks -->
    </div> <!-- sidenav -->





#main {
  position: relative;
  display: flexbox;
  float: left;
  top: 30px;
  }

#mainMenuButton {
  position: relative;
  color: white;
  background-color:#fd886b;
  cursor: pointer;
  padding: 10px;
  border: solid 1px orangered;
}
    
  .signin-icon {
    color:white;
    height: 10px;
    width: 2px;
    position: relative;
    display: inline-block;
    padding: 1px;
    z-index: 1;               
    cursor: pointer;
  }

/*#containersignin a:hover{
background: red;
}*/

.signin-sidenav {
  position: absolute;
  display: inline-block;
  height: 30px;
  width: 100%; /* gives a slider to screen */
  top: 0;
  }
  

  .hello-sign-in-sentence {
    background-color: #fd886b;
    display: inline-block;
    position: absolute;
    top: 0px;
    width: 100%;
    height: 30px;
    text-align: center;
    }
    
    #homeActive {
      color: orangered;
      
      }
      
      .sidenav {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 100;
        top: 0;
        background-color: white;
        overflow-x: hidden;
        transition: 0.5s;
        will-change: opacity 10%;
        -webkit-tap-highlight-color: transparent;
        padding-left: 0px;
        padding-right: 5px;
        left: -5px;
        overflow: scroll;
      }

      .sidenav a {
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 15px;
        color: #818181;
        display: block;
      }


      .signin-sidenav a:hover {
        color: white;
      }
      
      .side-nav-hoverlinks a:hover{
      background-color: #fd886b;
      color: white;
      -webkit-transition: background-color 0.6s ease-out, color 0.6s ease-out;
      -moz-transition: background-color 0.6s ease-out, color 0.6s ease-out;
      -o-transition: background-color 0.6s ease-out, color 0.6s ease-out;
      transition: background-color 0.6s ease-out, color 0.6s ease-out;
      width: 100%;
      }

      #homeActive a:hover {
        color: white;
      }


      .sidenav .closebtn {
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        right: 0px;
        color: black;
      }
      
      #closebtn {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
        visibility: visible;
        margin-top: 25px; /* change to top */
        left: 30px;
        display: inline-block;
        padding-left: 5px;
        position: relative;
        width: 25px;
        height: 25px;
      }
      
.menuinsidebtn {
  padding: solid 1px;
  position: relative;
  left: 32px;
  top: 5px;
}

.insidebtn {
  padding: solid 1px;
  position: relative;
  left: 32px;
  top: 5px;
}


#closebtnposition {
  position: relative;
}

#closebtnposition a:hover{
  color: #fd886b;
}

.helpandsettingsinsidebtn {
  padding: solid 1px;
  position: relative;
  left: 32px;
  top: 5px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}



#my-world-linebreak {
  width: 90%;
  background-color: #ece9d9;
  padding: 1px 0px;
  position: relative;
  left: 20px;
  bottom: 10px;
  }

  #help-and-settings-linebreak {
    width: 90%;
    background-color: #ece9d9;
    padding: 1px 0px;
    position: relative;
    left: 20px;
    bottom: 10px;
    } 

菜单






我的世界




帮助和设置


#主要{
位置：相对位置；
显示器：flexbox；
浮动：左；
顶部：30px；
}
#主菜单按钮{
位置：相对位置；
颜色：白色；
背景色：#fd886b；
光标：指针；
填充：10px；
边框：实心1px橙色；
}
.签名图标{
颜色：白色；
高度：10px；
宽度：2倍；
位置：相对位置；
显示：内联块；
填充：1px；
z指数：1；
光标：指针；
}
/*#集装箱a：悬停{
背景：红色；
}*/
siden sidenav先生{
位置：绝对位置；
显示：内联块；
高度：30px；
宽度：100%；/*为屏幕提供滑块*/
排名：0；
}
.hello登录句{
背景色：#fd886b；
显示：内联块；
位置：绝对位置；
顶部：0px；
宽度：100%；
高度：30px；
文本对齐：居中；
}
#家庭活动{
颜色：橙色；
}
.侧导航{
身高：100%；
宽度：0；
位置：固定；
z指数：100；
排名：0；
背景色：白色；
溢出x：隐藏；
过渡：0.5s；
将改变：不透明度10%；
-webkit点击突出显示颜色：透明；
左侧填充：0px；
右侧填充：5px；
左：-5px；
溢出：滚动；
}
.侧导航a{
填充：8px 8px 8px 32px；
文字装饰：无；
字体大小：15px；
颜色：#818181；
显示：块；
}
.signin sidenav a:悬停{
颜色：白色；
}
.侧导航悬停链接a：悬停{
背景色：#fd886b；
颜色：白色；
-webkit过渡：背景色0.6s缓变，颜色0.6s缓变；
-moz过渡：背景色0.6s缓变，颜色0.6s缓变；
-o过渡：背景色0.6s缓变，颜色0.6s缓变；
过渡：背景色0.6s缓变，颜色0.6s缓变；
宽度：100%；
}
#homeActive a:悬停{
颜色：白色；
}
.sidenav.closebtn{
位置：绝对位置；
排名：0；
右：25px；
字体大小：36px；
右：0px；
颜色：黑色；
}
#关闭{
-webkit转换：无；
-moz转换：无；
-o-转变：无；
过渡：无；
能见度：可见；
页边距顶部：25px；/*更改为顶部*/
左：30px；
显示：内联块；
左侧填充：5px；
位置：相对位置；
宽度：25px；
高度：25px；
}
.menuinsidebtn{
填充物：实心1px；
位置：相对位置；
左：32px；
顶部：5px；
}
.内幕交易{
填充物：实心1px；
位置：相对位置；
左：32px；
顶部：5px；
}
#闭合位置{
位置：相对位置；
}
#关闭位置a：悬停{
颜色：#fd886b；
}
.Help和SettingsInSideBTN{
填充物：实心1px；
位置：相对位置；
左：32px；
顶部：5px；
}
@媒体屏幕和屏幕（最大高度：450像素）{
.sidenav{填充顶部：15px；}
.sidenav a{字体大小：18px；}
}
#我的世界断线{
宽度：90%；
背景色：#ece9d9；
填充：1px0px；
位置：相对位置；
左：20px；
底部：10px；
}
#帮助和设置换行符{
宽度：90%；
背景色：#ece9d9；
填充：1px0px；
位置：相对位置；
左：20px；
底部：10px；
}