如何不让其他div重叠我的导航栏

我似乎无法弄清楚如何重叠我的导航栏，以便它将始终在滚动时完全显示。代码如下。请帮助我，因为我迷失了几天。我使用position：fixed修复了navagation bar。我不知道我的div元素的位置是否错误，或者在制作固定的导航栏之前有些事情我应该知道。如何不让其他div重叠我的导航栏

body{ 
 
    background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg'); 
 

 
    
 
} 
 
*{ 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 
#maindiv{ 
 
    width:100%; 
 
    height:100px; 
 
} 
 

 
#navdiv ul{ 
 
    width:100%; 
 
    height:80px; 
 
    background-color:#000916; 
 
    line-height:80px; 
 
    position:fixed; 
 
} 
 
#navdiv ul li{ 
 
    list-style-type:none; 
 
    display:inline-block; 
 
    float: right; 
 
} 
 
#navdiv ul a{ 
 
    text-decoration:none; 
 
    color:white; 
 
    padding:20px; 
 
} 
 
#navdiv ul a:hover{ 
 
    background:#000948; 
 
    transition: all 0.40s; 
 
} 
 
#navdiv h1{ 
 
    color:white; 
 
    float:left; 
 
    width:200px; 
 
    margin-left:20px; 
 
    margin-top:10px; 
 
    cursor:pointer; 
 
} 
 
#about{ 
 
    width:50%; 
 
    margin:auto; 
 
    background-color:#000916; 
 
    border-radius:30px;; 
 
} 
 
#about p{ 
 
    color:white; 
 
} 
 
#left-text1{ 
 
    padding-left:10px; 
 
    padding-top:10px; 
 
} 
 
.resize{ 
 
    width:400px; 
 
    height:auto; 
 
    border-radius:30px; 
 
}

<head> 
 
    <title>Portfolio</title> 
 
</head> 
 
<body> 
 
    <div id="maindiv"> 
 
     <div id = "navdiv"> 
 
     <ul> 
 
      <h1>Danial</h1> 
 
      <li><a href="#" id="linkref">Contact</a></li> 
 
      <li><a href="#" id="linkref">Portfolio</a></li> 
 
      <li><a href="#" id="linkref">About</a></li> 
 
      <li><a href="#" id="linkref">Home</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div id="about"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>  
 
     </div> 
 
     <div class="col-md-6"> 
 
     <img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-07-26 Danial Izz

只需添加'的z-index：99999;''到#navdiv ul'类，所以这将永远是前面 – M0ns1f

哥们那合法就解决了我的问题，谢谢！ –

将我的答案标记为soultion然后，谢谢！ – M0ns1f

body{ 
 
    background-image:url('https://www.pixelstalk.net/wp-content/uploads/2016/04/Blue-icy-ocean-wallpaper-HD.jpg'); 
 

 
    
 
} 
 
*{ 
 
    padding:0px; 
 
    margin:0px; 
 
} 
 
#maindiv{ 
 
    width:100%; 
 
    height:100px; 
 
} 
 

 
#navdiv ul{ 
 
    width:100%; 
 
    height:80px; 
 
    background-color:#000916; 
 
    line-height:80px; 
 
    position:fixed; 
 
    /* you can set who you want to be infront by the z-index prop */ 
 
    z-index:99999; 
 
} 
 
#navdiv ul li{ 
 
    list-style-type:none; 
 
    display:inline-block; 
 
    float: right; 
 
} 
 
#navdiv ul a{ 
 
    text-decoration:none; 
 
    color:white; 
 
    padding:20px; 
 
} 
 
#navdiv ul a:hover{ 
 
    background:#000948; 
 
    transition: all 0.40s; 
 
} 
 
#navdiv h1{ 
 
    color:white; 
 
    float:left; 
 
    width:200px; 
 
    margin-left:20px; 
 
    margin-top:10px; 
 
    cursor:pointer; 
 
} 
 
#about{ 
 
    width:50%; 
 
    margin:auto; 
 
    background-color:#000916; 
 
    border-radius:30px;; 
 
} 
 
#about p{ 
 
    color:white; 
 
} 
 
#left-text1{ 
 
    padding-left:10px; 
 
    padding-top:10px; 
 
} 
 
.resize{ 
 
    width:400px; 
 
    height:auto; 
 
    border-radius:30px; 
 
}

<head> 
 
    <title>Portfolio</title> 
 
</head> 
 
<body> 
 
    <div id="maindiv"> 
 
     <div id = "navdiv"> 
 
     <ul> 
 
      <h1>Danial</h1> 
 
      <li><a href="#" id="linkref">Contact</a></li> 
 
      <li><a href="#" id="linkref">Portfolio</a></li> 
 
      <li><a href="#" id="linkref">About</a></li> 
 
      <li><a href="#" id="linkref">Home</a></li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    <div id="about"> 
 
    <div class="row"> 
 
     <div class="col-md-6"> 
 
     <p id="left-text1">Welcome to my Site<br>I am a front-end web developer who loves to cooperate and involve in projects to either earned money or earned experience</p>  
 
     </div> 
 
     <div class="col-md-6"> 
 
     <img class="resize"src="https://www.123freevectors.com/wp-content/uploads/digi/casual-man-standing-free-vector-17.jpg"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-07-26 09:35:03 M0ns1f

如何不让其他div重叠我的导航栏

回答

相关问题