个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 15:25:26 26 4
gpt4 key购买 nike

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

26 4 0
文章推荐： html - 从 html 中删除 id 以重用代码
文章推荐： javascript - 重启 css 过渡
文章推荐： css - 为什么我的后备字体系列 css (arial) 被使用而不是主要的
文章推荐： css - md-icons 是如何在浏览器上呈现的