Блог

Главная - Вопросы по программированию - Почему моя кнопка перекрывает панель навигации при прокрутке?

Почему моя кнопка перекрывает панель навигации при прокрутке?

#html #css #button #navigationbar #overlapping

Вопрос:

Это мой первый раз, когда я создаю веб-сайт для школьного проекта, так что потерпите мой грязный код. Моя проблема в том, что когда я прокручиваю панель навигации, которая находится вверху, и пересекает мою кнопку «Узнать больше», кнопка перекрывает панель навигации. Кто-нибудь знает, как это исправить?

 .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: '0bb';
  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 amp;copy; 2020 </footer>
      </div>
    </main>

Комментарии:

1. У вашего HTML есть серьезные проблемы. Я предлагаю запустить его через валидатор. Например, элемент title должен находиться в элементе head (и ссылки на таблицу стилей должны быть). У вас есть элемент div, который оборачивает все это, а также тело, что недопустимо. У вас есть якоря как дочерние элементы списков. Также недопустимо. И вы используете разрывы строк для макета. Не очень хорошая практика — используйте для этого инструменты CSS spacing tools. Я понимаю, что вы учитесь, но убедитесь, что вы не приобретаете вредных привычек, не проверяя свой синтаксис. Браузер не всегда сообщает вам, что не так. Он просто пытается исправить это, угадывая.

2. Вам также не хватает элемента html. Это требуется для любого html-документа.

3. @isherwood Спасибо за все советы! Я действительно ценю это, так как хочу, чтобы этот проект выглядел потрясающе. Я поместил <HTML> над <body> , правильно?

4. Элемент html обходит все остальные элементы. Вы должны найти хорошую ссылку , а не спрашивать меня здесь.

Ответ №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: '0bb';
  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 amp;copy; 2020 </footer>
</div>
</main>

Комментарии:

1. Вы — абсолютный СПАСАТЕЛЬ! Большое вам спасибо!

2. @KyItsHigh Добро пожаловать 🙂

Ответ №2:

Чтобы убедиться, что панель навигации находится над любым другим элементом страницы, вы должны переместить z-index значение, которое у вас есть в nav селекторе, в .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> разделе (видимые элементы).

Метки: