Why is my button overlapping my navbar when scrolling?-CodePudding

This is my first time creating a website for a school project so bear with my messy code. My problem is that when I scroll with my nav bar that sticks to the top and it crosses over my Learn More button, the button overlaps over the NAVBar. Does anyone know how to fix this?

.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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
      <script nomodule src="https://unpkg.com/[email protected]/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>

CodePudding user response：

Here you go, z-index is really good for that. When you have z-index, it's basically what you want in front. So here, I put z-index in the .container class, and you can see that the navbar is always up front.

.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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
        <script nomodule src="https://unpkg.com/[email protected]/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>

CodePudding user response：

In order to make sure that the nav bar is above any other element in the page you should move the z-index value that you have on the nav selector to the .container class.

The two css elements will then become:

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

Please note that even if it has no impact on the current issue, I would strongly encourage you to restructure the HTML code. A valid HTML document has the following top structure:

<!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>

Any other elements that you would like to add need to go in <head>...</head> section (external scripts or CSS, meta-information) or <body>...</body> section (visible elements).