为什么我的按钮在滚动时会与导航栏重叠？答案

【问题标题】：Why is my button overlapping my navbar when scrolling?为什么我的按钮在滚动时会与导航栏重叠？
【发布时间】：2021-11-22 20:13:27
【问题描述】：

这是我第一次为学校项目创建网站，所以请忍受我凌乱的代码。我的问题是，当我使用粘在顶部的导航栏滚动并越过我的“了解更多”按钮时，该按钮会与 NAVBar 重叠。有谁知道如何解决这个问题？

.container {
  position: sticky;
  top: 0;
  position: -webkit-sticky;
  background: #FACABC;
}

nav {
  z-index: 9999;
}


/* Nav bar*/

.container nav {
  width: 100%;
  height: 76px;
  font-size: 48px;
  padding-left: 7em;
  /* Centers "Home, About me, Socials, etc" text */
}

.container nav a {
  text-align: center;
  text-decoration: none;
  color: #987b74;
  padding-right: 100px;
}

.container nav ul {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  list-style-type: none;
  transition: all 0.5s ease;
}

.container nav ul li {
  width: 10%;
  float: left;
  text-align: center;
  color: #987b74;
  font-size: 41px;
  font-weight: bold;
  transition: all 0.5s ease;
  position: sticky;
  cursor: pointer;
  top: 0;
}

.container nav ul li:hover {
  color: #5E4C47;
}

.container nav ul li ul.sub-nav {
  position: absolute;
  background: white;
  /* Background of drop down */
  width: 75%;
  height: 110px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.14), -1px 0px 1px rgba(0, 0, 0, 0.14);
  top: 75px;
  left: 0;
  visibility: hidden;
  opacity: 0;
}

.container nav ul li ul.sub-nav li {
  font-size: 31px;
  font-family: primer, "Times New Roman", sans-sarif;
  width: 75%;
}

.container nav ul li:hover ul.sub-nav
/* Drop down menu visibility */

{
  visibility: visible;
  opacity: 75%;
  margin-top: 2px;
}

.container li {
  display: inline-block;
}

.container nav ul li ul.sub-nav a:hover {
  color: #5E4C47;
  transition: all 0.5s ease;
}

.container nav ul li ul.sub-nav a {
  padding: 0;
}

main h2 {
  padding-right: 10em;
  padding-left: 10em;
}

main .learn-more {
  border-radius: 2px;
  background-color: #FACABC;
  border: none;
  color: #987b74;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 275px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-family: primer, "Times New Roman", sans-sarif;
}

main .learn-more span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

main .learn-more span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

main .learn-more:hover span {
  padding-right: 25px;
}

main .learn-more:hover span:after {
  opacity: 1;
  right: 0;
}

<div id="wrapper">
  <title>HighItsKy</title>
  <link href="highitsky.css" rel="stylesheet">
  <link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
  <link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <body>
    <header>
      <a id="homelink" href="index.html">
        <h2 id="homelink">HighItsKy</h2>
      </a>
      <br><br><br>
      <br>
      <span class="title"><h1>HighItsKy</h1></span>
      <h2>part time streamer, full time vibe</h2>
      <br><br>
      <a href="https://www.twitch.tv/highitsky/" target="_blank">
        <ion-icon name="logo-twitch"></ion-icon>
      </a>
      <a href="https://discord.gg/M2umXEhkNq" target="_blank">
        <ion-icon name="logo-discord"></ion-icon>
      </a>
      <a href="https://youtube.com/highitsky" target="_blank">
        <ion-icon name="logo-youtube"></ion-icon>
      </a>
      <a href="https://www.instagram.com/highitsky_/" target="_blank">
        <ion-icon name="logo-instagram"></ion-icon>
      </a>
      <a href="https://www.tiktok.com/@highitsky" target="_blank">
        <ion-icon name="logo-tiktok"></ion-icon>
      </a>
      <a href="https://www.twitter.com/highitsky_/" target="_blank">
        <ion-icon name="logo-twitter"></ion-icon>
      </a>
      <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
      <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
      <br><br><br><br><br>
    </header>
    <div class="container">
      <nav>
        <ul>
          <a href="index.html">
            <li>Home</li>
          </a>
          <li>About Me
            <ul class="sub-nav">
              <a href="AboutMe.html">
                <li>ABOUT</li>
              </a>
              <a href="Cloves.html">
                <li>CLOVES</li>
              </a>
            </ul>
          </li>
          <li>Socials
            <ul class="sub-nav">
              <a href="Socials.html">
                <li>SOCIALS</li>
              </a>
              <a href="Contact.html">
                <li>CONTACT</li>
              </a>
            </ul>
          </li>
          <a href="Community.html">
            <li>Community</li>
          </a>
          <a href="Partnerships.html">
            <li>Partnerships</li>
          </a>
          <li>Support
            <ul class="sub-nav">
              <a href="Donate.html">
                <li>DONATE</li>
              </a>
              <a href="Merch.html">
                <li>MERCH</li>
              </a>
              <a href="Organizations.html">
                <li>OTHER</li>
              </a>
            </ul>
          </li>
        </ul>
      </nav>
      <div class="header"></div>
    </div>
    <main>
      <div class="backgroundcolor">
        <br><br>
        <h1>High, I'm Ky
          <h1><br>
            <h2>I started streaming on . . . </h2>
            <br>
            <a href="AboutMe.html"><button class="learn-more"><span>LEARN MORE </span></button></a>
            <br><br><br><br><br>
      </div>
      <div class="video-trailer">
        <br><br>
        <h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
        <br><br>
        <center>
          <video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
        <source src="trailer.mp4" type="video/mp4">
    </video>
          <br><br>
          <h2>what matters is that I get to spend time with the people that I love; my community!</h2>
          <br><br>
      </div>
      <div class="backgroundcolor">
        <br><br>
        <h1>High-lights</h1>
        <br><br>
        <hr size="2" color="#987b74">
        <br><br>
        <ul>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </li>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </li>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </li>
          <br><br>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </li>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>

          </li>
          <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
          </li>
        </ul>
        <br><br>
        <hr size="2" color="#987b74">
        <footer>HighItsKy &copy; 2020 </footer>
      </div>
    </main>

【问题讨论】：

您的 HTML 存在一些严重问题。我建议通过验证器运行它。例如，title 元素必须在 head 元素中（样式表链接应该是）。您有一个 div 元素，它包含所有内容以及正文，这是无效的。您将锚点作为列表的子项。也无效。而且您正在使用换行符进行布局。不好的做法——为此使用 CSS 间距工具。我知道您正在学习，但请确保您没有通过不检查语法来学习坏习惯。浏览器并不总是告诉你出了什么问题。它只是试图通过猜测来修复它。
您还缺少一个 html 元素。这是任何 html 文档所必需的。
@isherwood 感谢您提供的所有提示！我真的很感激，因为我希望这个项目看起来很棒。我把放在上面，对吗？
html 元素围绕所有其他元素。你应该找到a good reference 而不是在这里问我。

标签： html css button navigationbar overlapping

【解决方案1】：

给你，z-index 非常适合。当你有z-index 时，它基本上就是你想要的。所以在这里，我把z-index放在.container类中，你可以看到导航栏总是在前面。

.container
{
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    background: #FACABC;
    z-index:1;
}
    
nav
{

    z-index: 9999;
}
/* Nav bar*/
.container nav
{
    width: 100%;
    height: 76px;
    
    
    font-size: 48px;
    padding-left: 7em; /* Centers "Home, About me, Socials, etc" text */
}
.container nav a
{
    text-align: center;
    text-decoration: none;
    color: #987b74;
    padding-right: 100px;
}
.container nav ul
{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    list-style-type: none;
    transition: all 0.5s ease;
}
.container nav ul li
{
    width: 10%;
    float: left;
    text-align: center;
    color: #987b74;
    font-size: 41px;
    font-weight: bold;
    transition: all 0.5s ease;
    position: sticky;
    cursor: pointer;
    top: 0;
}
.container nav ul li:hover
{
    color: #5E4C47;
}   
.container nav ul li ul.sub-nav 
{
    position: absolute;
    background: white; /* Background of drop down */
    width: 75%;
    height: 110px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.14), -1px 0px 1px rgba(0,0,0,0.14);
    top: 75px;
    left: 0;
    visibility: hidden;
    opacity: 0;
}
.container nav ul li ul.sub-nav li
{

    font-size: 31px;
    font-family: primer, "Times New Roman", sans-sarif;
    width: 75%;
}

.container nav ul li:hover ul.sub-nav /* Drop down menu visibility */
{
    visibility: visible;
    opacity: 75%;
    margin-top: 2px;
}
.container li
{
    display: inline-block;
}
.container nav ul li ul.sub-nav a:hover
{
    color: #5E4C47;
    transition: all 0.5s ease;
}
.container nav ul li ul.sub-nav a
{
    padding: 0;
}
main h2
{
    padding-right: 10em;
    padding-left: 10em;
}
main .learn-more {
  border-radius: 2px;
  background-color: #FACABC;
  border: none;
  color: #987b74;
  text-align: center;
  font-size: 28px;
  padding: 20px;
  width: 275px;
  transition: all 0.5s;
  cursor: pointer;
  margin: 0;
  position: absolute;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
font-family: primer, "Times New Roman", sans-sarif;
}

main .learn-more span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

main .learn-more span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
}

main .learn-more:hover span {
  padding-right: 25px;
}

main .learn-more:hover span:after {
  opacity: 1;
  right: 0;
}

<!DOCTYPE html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="highitsky.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">     
<body>
    <header>
        <a id="homelink" href="index.html"><h2 id="homelink">HighItsKy</h2></a>
        <br><br><br>
        <br>
        <span class="title"><h1>HighItsKy</h1></span>
        <h2>part time streamer, full time vibe</h2>
        <br><br>
        <a href="https://www.twitch.tv/highitsky/" target="_blank"><ion-icon name="logo-twitch"></ion-icon></a>
        <a href="https://discord.gg/M2umXEhkNq" target="_blank"><ion-icon name="logo-discord"></ion-icon></a>
        <a href="https://youtube.com/highitsky" target="_blank"><ion-icon name="logo-youtube"></ion-icon></a>
        <a href="https://www.instagram.com/highitsky_/" target="_blank"><ion-icon name="logo-instagram"></ion-icon></a>
        <a href="https://www.tiktok.com/@highitsky" target="_blank"><ion-icon name="logo-tiktok"></ion-icon></a>
        <a href="https://www.twitter.com/highitsky_/" target="_blank"><ion-icon name="logo-twitter"></ion-icon></a>
        <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
        <br><br><br><br><br>
    </header>
    <div class="container">
    <nav>
        <ul>
            <a href="index.html"><li>Home</li></a>
            <li>About Me
                <ul class="sub-nav">
                    <a href="AboutMe.html"><li>ABOUT</li></a>
                    <a href="Cloves.html"><li>CLOVES</li></a>
                </ul>
            </li>
            <li>Socials
                <ul class="sub-nav">
                    <a href="Socials.html"><li>SOCIALS</li></a>
                    <a href="Contact.html"><li>CONTACT</li></a>
                </ul></li>
            <a href="Community.html"><li>Community</li></a>
            <a href="Partnerships.html"><li>Partnerships</li></a>
            <li>Support
                <ul class="sub-nav">
                    <a href="Donate.html"><li>DONATE</li></a>
                    <a href="Merch.html"><li>MERCH</li></a>
                    <a href="Organizations.html"><li>OTHER</li></a>
                </ul></li>
        </ul>
    </nav>
        <div class="header"></div>
    </div>
<main>
<div class="backgroundcolor">
    <br><br><h1>High, I'm Ky<h1><br>
    <h2>I started streaming on Twitch in February of 2020, with my streams mainly consisting of Minecraft content! 
    Whether I am dying a lot in Singleplayer or getting scared by creepers, my main focus is maintaining a positive and welcoming 
    community in a not-so-welcoming world. I currently live in Kansas, and I am 19 years old and majoring in Computer Science at FHSU. . . </h2>
    <br>
    <a href="AboutMe.html"><button class="learn-more"><span>LEARN MORE </span></button></a>
    <br><br><br><br><br>
</div>
    <div class="video-trailer">
    <br><br>
        <h2>My streams consist of a lot of yelling, dying, losing, and sometimes crying, but...</h2>
    <br><br>
    <center>
    <video controls="controls" height="64%" width="62%" style='border: 2px solid #FACABC;'>
        <source src="trailer.mp4" type="video/mp4">
    </video>
    <br><br>
        <h2>what matters is that I get to spend time with the people that I love; my community!</h2>
    <br><br>
    </div>
<div class="backgroundcolor">
    <br><br>
    <h1>High-lights</h1>
    <br><br>
    <hr size="2" color="#987b74">
    <br><br>
    <ul>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/HQQ3LfzPrEI" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/zNUe4U8ps5k" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Sh7yxSijuxI" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <br><br>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/PGgvM_9pZok" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/S_M8JgzfdW4" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
            
        </li>
        <li>
            <iframe width="560" height="315" src="https://www.youtube.com/embed/Pk0GZE-3EqQ" 
            title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
            encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
            </iframe>
        </li>
    </ul>
    <br><br>
    <hr size="2" color="#987b74">
<footer>HighItsKy &copy; 2020 </footer>
</div>
</main>

【讨论】：

你是一个绝对的救生员！非常感谢！
@KyItsHigh 欢迎你 :)

【解决方案2】：

为了确保导航栏位于页面中的任何其他元素之上，您应该将 nav 选择器上的 z-index 值移动到 .container 类。

这两个 css 元素会变成：

.container
{
    position: sticky;
    top: 0;
    position: -webkit-sticky;
    background: #FACABC;
    z-index: 9999;
}
    
nav
{
    
}

请注意，即使它对当前问题没有影响，我强烈建议您重新构建 HTML 代码。有效的 HTML 文档具有以下顶层结构：

<!DOCTYPE html>
<html>
    <head>
        <title>HighItsKy</title>
        <link href="highitsky.css" rel="stylesheet">
        <!-- other links and meta-information -->
    </head>
    <body>
        <!-- all visible elements from the document: div, p, span ... -->
    </body>
</html>

您想要添加的任何其他元素都需要进入<head>...</head> 部分（外部脚本或CSS、元信息）或<body>...</body> 部分（可见元素）。

【讨论】：