如何不讓其他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重疊我的導航欄

回答

相關問題