क्यों मेरे बटन अतिव्यापी मेरी नेवबार स्क्रॉल जब?

Question 1

यह मेरी पहली बार एक वेबसाइट बनाने के एक स्कूल परियोजना के लिए तो भालू के साथ गन्दा कोड. मेरी समस्या यह है कि जब मैं स्क्रॉल के साथ नेविगेशन बार में चिपक जाती है कि शीर्ष करने के लिए और इसे खत्म पार मेरे जानने के लिए और अधिक बटन, बटन overlaps पर 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/[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

यहाँ तुम जाओ, z-सूचकांक के लिए वास्तव में अच्छा है कि. जब आप 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/[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

क्रम में है सुनिश्चित करने के लिए नेविगेशन बार से ऊपर है, किसी भी अन्य तत्व पेज में आप को स्थानांतरित करना चाहिए z-index मूल्य है कि आप पर है nav चयनकर्ता के लिए .container वर्ग.

दो सीएसएस तत्व बन जाएगा:

.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> खंड (बाहरी लिपियों या सीएसएस, मेटा-जानकारी) या <body>...</body> खंड (दृश्यमान) तत्वों.

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

यहाँ तुम जाओ, z-सूचकांक के लिए वास्तव में अच्छा है कि. जब आप 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/[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>

आप कर रहे हैं एक पूर्ण जीवन रक्षक! बहुत बहुत धन्यवाद!
@KyItsHigh आप का स्वागत कर रहे हैं :)

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

क्रम में है सुनिश्चित करने के लिए नेविगेशन बार से ऊपर है, किसी भी अन्य तत्व पेज में आप को स्थानांतरित करना चाहिए z-index मूल्य है कि आप पर है nav चयनकर्ता के लिए .container वर्ग.

दो सीएसएस तत्व बन जाएगा:

.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> खंड (बाहरी लिपियों या सीएसएस, मेटा-जानकारी) या <body>...</body> खंड (दृश्यमान) तत्वों.

क्यों मेरे बटन अतिव्यापी मेरी नेवबार स्क्रॉल जब?

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में