我似乎无法弄清楚如何重叠我的导航栏，以便它在滚动时始终完全显示。代码如下。请帮助我，因为我迷路了几天。我已经使用 position:fixed 修复了导航栏。我不知道是我的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>
`
最佳答案
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>
关于html - 如何不让其他 div 重叠我的导航栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45322913/