为什么导航栏不在网站顶部？答案

【问题标题】：Why is the navigation bar not on top of the website?为什么导航栏不在网站顶部？
【发布时间】：2021-03-24 23:39:16
【问题描述】：

我目前正在通过创建一个简单的网站来练习 html 和 css。

我的问题是我不能将导航栏放在网站上方。我认为问题在于标题或背景视频。这是更多细节的图片。 Click here

我认为当导航栏被解决后，游戏段落将在自己的位置上。

现在这是我的 html 和 css 代码。

body{
    background: rgba(236,232,225,255);
    color: #333;
    font-family: helvetica;
    font-size: 15px;
    line-height: .5cm;
    
    margin: 0;
    padding: 0;
}

/* links configuration here */
a:link{
    text-decoration: none;
    color:rgba(216, 108, 108, 0.932);
}

a:hover{
    color: blue;
}
/* links configuration ends here */

#webname{ /* heading here */
    padding-top: 15%;
    padding-bottom: 15%;
    
    text-align: center;
    font-size: 150px;
    font-family: VALORANT;
    color:white;
}

#navname{ /* navigation bar name */   
    font-size: 75px;
    font-family: VALORANT;
    color: rgba(216, 108, 108, 0.932);

    float: left;
    padding-left: 30px;

    -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
    -webkit-text-stroke: 1px white;
}

.navlinks li{ /* navigation links */
    display: inline;
    padding-right: 15px;
    font-family: Helvetica;
    font-weight: bold;

    float: right;
}

#videoBG{ /* background vid */
    position: absolute;
    right: 0; 
    bottom: 30%;
    min-width: 100%; 
    min-height: 100%;
    width: auto; 
    height: auto; 
    z-index: -100;
    background-size: cover;
    overflow: hidden;
}

@media (min-aspect-ratio: 16/9){
    #videoBG{
        width: 100%;
        height: auto;
    }
}

@media (max-aspect-ratio: 16/9){
    #videoBG{
        width: auto;
        height: 100%;
    }
}

@media (max-width: 767px){
    #videoBG{
        display: none;
    }

    body {
        background: url('valoClip.png');
        background-size: cover;
    }
}

@font-face {
    font-family: 'VALORANT';
    src: url(fonts/Valorant\ Font.ttf);
    font-style: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Valorant</title>
    <link rel="stylesheet" href="Valorant.css">
</head>

<body>
    <!--Title-->
    <h1 id="webname">valoraNt</h1>
    <h1 id="navname">valoraNt</h1>
    
    <div class="wrapper">
        <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

    </div>

    <!--Navigation Bar here-->
    <nav id="navbar">
        <div class="container">
            <ul class="navlinks">
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Gameplay</a></li>
                <li><a href="#">Guides</a></li>
            </ul>
        </div>
    </nav>
    
    <!--Gameplay here-->
    <div class="mainBody">
        
    <h3>GAMEPLAY</h3>
    
    <p>
    Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits.
    Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack
    and defend your side using sharp gunplay and tactical abilities. And, with one life per-round,
    you'll need to think faster than your opponent if you want to survive. Take on foes across
    Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice
    mode or tool to help you manage your aim.
    </p>
    
    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>
    
</div>

我不确定某些代码的使用是否正确，但您也可以教我正确使用代码。感谢您的帮助：>

【问题讨论】：

标签： html css uinavigationbar

【解决方案1】：

如果我是你，我也会把我的标志放在我的导航中，如果你要把它放在那里。要将其放在顶部并留在那里，您可以使用 position: absolute。现在您也可以将其固定，这样当您滚动时它会保持在顶部。我编辑了您的代码，将其添加到您的 css 中，它将作为固定导航。

nav, #navname {
    position: fixed;
    top: 0;
}

#navname {
    position: absolute;
    left: 0;
}

.navlinks {
    position: fixed;
    right: 20px;
    top: 50px;
}

【讨论】：

【解决方案2】：

这是因为你把导航栏放在h1 标签之后才这样。制作一个header 标签并将h1 与navname id 放在一起，并将您的导航放在上述header 标签中。我在您的代码中添加了一些 CSS 样式。检查并在您认为合适的情况下在您的项目中实施。

body {
  background: rgba(236, 232, 225, 255);
  color: #333;
  font-family: helvetica;
  font-size: 15px;
  line-height: .5cm;
  margin: 0;
  padding: 0;
}

header {
  align-content: center;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: white'

}


/* links configuration here */

a {
  text-decoration: none;
  color: rgba(216, 108, 108, 0.932);
}

a:hover {
  color: blue;
}


/* links configuration ends here */

#webname {
  /* heading here */
  padding-top: 15%;
  padding-bottom: 15%;
  text-align: center;
  font-size: 150px;
  font-family: VALORANT;
  color: white;
}

#navname {
  /* navigation bar name */
  font-size: 75px;
  font-family: VALORANT;
  color: rgba(216, 108, 108, 0.932);
  float: left;
  padding-left: 30px;
  -webkit-text-fill-color: rgba(216, 108, 108, 0.932);
  -webkit-text-stroke: 1px white;
}

.navlinks {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  font-size: 20px;
}

.navlinks li {
  /* navigation links */
  float: right;
}

.navlinks a {
  display: block;
  text-align: center;
  padding: 14px 16px;
  font-size: 40px;
}

#videoBG {
  /* background vid */
  position: absolute;
  right: 0;
  bottom: 30%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -100;
  background-size: cover;
  overflow: hidden;
}

@media (min-aspect-ratio: 16/9) {
  #videoBG {
    width: 100%;
    height: auto;
  }
}

@media (max-aspect-ratio: 16/9) {
  #videoBG {
    width: auto;
    height: 100%;
  }
}

@media (max-width: 767px) {
  #videoBG {
    display: none;
  }
  body {
    background: url('valoClip.png');
    background-size: cover;
  }
}

@font-face {
  font-family: 'VALORANT';
  src: url(fonts/Valorant\ Font.ttf);
  font-style: normal;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Valorant</title>
  <link rel="stylesheet" href="Valorant.css">
</head>

<body>
  <!--Navigation Bar here-->
  <header>
    <div>
      <h1 id="navname">valoraNt</h1>
    </div>
    <nav id="navbar">
      <ul class="navlinks">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gameplay</a></li>
        <li><a href="#">Guides</a></li>
      </ul>
    </nav>
  </header>

  <!--Title-->
  <h1 id="webname">valoraNt</h1>

  <div class="wrapper">
    <video id="videoBG" poster="valoClip.png" autoplay muted loop>
            <source src="valoClip.mp4" type="video/mp4">
        </video>

  </div>

  <!--Gameplay here-->
  <div class="mainBody">

    <h3>GAMEPLAY</h3>

    <p>
      Valorant is an online <abbr title="First Person Shooter">FPS</abbr> game that defy the limits. Blend your style and experience on a global, competitive stage. The game has 13 rounds to attack and defend your side using sharp gunplay and tactical
      abilities. And, with one life per-round, you'll need to think faster than your opponent if you want to survive. Take on foes across Competitive and Unranked modes as well as Deathmatch and Spike Rush. There is also a Practice mode or tool to help
      you manage your aim.
    </p>

    <p><a href="https://www.youtube.com/watch?v=e_E9W2vsRbQ" target="_blank"> Watch the trailer here</a></p>

  </div>

【讨论】：