代码之家  ›  专栏  ›  技术社区  ›  DON_DON

如何避免其他div与我的导航栏重叠

  •  1
  • DON_DON  · 技术社区  · 7 年前

    我似乎不知道如何重叠导航栏,以便在滚动时始终完全显示。代码如下所示。我迷路了几天,请帮帮我。我已经使用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>
    
        

    `

    1 回复  |  直到 7 年前
        1
  •  1
  •   M0ns1f    7 年前

    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>