Prečo je môj tlačidlo súbehu moje navbar pri rolovaní?

Question 1

Toto je môj prvý krát tvorbu webových stránok pre školský projekt tak majte so moje chaotický kód. Môj problém je, že keď som prejdite s mojím navigačný panel, ktorý sa drží na vrchole a to prechádza cez moju Dozvedieť Viac tlačidlo, tlačidlo prekrýva viac v navigačnom paneli. Vie niekto ako to opraviť?

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

Question 2

Tu máš, z-index je naozaj dobré pre to. Keď máte z-indexto je v podstate to, čo chcete, v prednej časti. Tak tu som dal z-index v .container triedy, a môžete vidieť, že v navigačnom paneli je vždy dopredu.

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

Question 3

V poradí a uistite sa, že nav bar je nad akýmkoľvek ostatným prvkom, na stránke by ste sa mali presunúť z-index hodnota, ktorú máte na nav selektor na .container triedy.

Dve css prvkov sa potom stane:

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

Vezmite prosím na vedomie, že aj keď to nemá žiadny vplyv na aktuálne vydanie, ja by som dôrazne odporúčame, aby ste reštrukturalizovať HTML kód. Platný dokument HTML má nasledujúce top štruktúra:

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

Akékoľvek iné prvky, ktoré by ste chceli pridať potrebu ísť <head>...</head> oddiel (externé skripty alebo CSS, meta-informácie) alebo <body>...</body> oddiel (viditeľné prvky).

Coja · Answer 1 · 2021-11-22T20:22:57

Tu máš, z-index je naozaj dobré pre to. Keď máte z-indexto je v podstate to, čo chcete, v prednej časti. Tak tu som dal z-index v .container triedy, a môžete vidieť, že v navigačnom paneli je vždy dopredu.

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

Teodor · Answer 2 · 2021-11-22T20:40:50

V poradí a uistite sa, že nav bar je nad akýmkoľvek ostatným prvkom, na stránke by ste sa mali presunúť z-index hodnota, ktorú máte na nav selektor na .container triedy.

Dve css prvkov sa potom stane:

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

Vezmite prosím na vedomie, že aj keď to nemá žiadny vplyv na aktuálne vydanie, ja by som dôrazne odporúčame, aby ste reštrukturalizovať HTML kód. Platný dokument HTML má nasledujúce top štruktúra:

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

Akékoľvek iné prvky, ktoré by ste chceli pridať potrebu ísť <head>...</head> oddiel (externé skripty alebo CSS, meta-informácie) alebo <body>...</body> oddiel (viditeľné prvky).

Prečo je môj tlačidlo súbehu moje navbar pri rolovaní?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii