Question

我似乎无法弄清楚如何重叠我的导航栏，以便在滚动时始终完全显示。代码如下。请帮帮我，因为我迷了几天。我已经使用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>

`

Answer 1

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>

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

1 个答案: