Блог

Главная - Вопросы по программированию - Панель навигации не является интерактивной только в одном разделе сайта

Панель навигации не является интерактивной только в одном разделе сайта

#html #css #flexbox #navbar

#HTML #css #flexbox #панель навигации

Вопрос:

Я хочу, чтобы панель навигации оставалась в фиксированном положении. Это работает нормально, но ссылки недоступны в разделе «Моя витрина». Как только вы прокрутите страницу вниз, она снова станет доступной для просмотра. Мне нужна помощь в понимании того, почему это происходит

  <nav id="nav-bar">
      <h2 class="logo">
      <span class="txt-primary"><i class="far fa-moon"></i></span> | MMM
    </h2>
      <ul>
        <li class="nav-link"><a href="#about">About</a></li>
        <li class="nav-link"><a href="#service">Services</a></li>
        <li class="nav-link"><a href="#videos">Videos</a></li>
        <li class="nav-link"><a href="#contact">Contact</a></li>
      </ul>
    </nav>

CSS:

 #nav-bar {
  display: flex;
  position: fixed;
  width: 100%;
  background: rgba(60,3,56,0.8);
  color: #dbd8e5;
  justify-content: space-between;
  padding: 0.4rem;
}

#nav-bar ul {
  display: flex;
  align-items: center;
}

#nav-bar ul li a {
  padding: 0.55rem;
  color: #7c72a0;
}
#nav-bar ul li a:hover {
  background: #5f0d45;
  color: #dbd8e5;
  padding: 0.75rem;
}

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

1. вероятно, проблема со стекированием…. вы пробовали устанавливать высокое значение z-index ? Что-то выше, чем ваш «раздел витрины», но вы можете попробовать, как z-index: 99999; на #nav-bar , просто для тестирования

2. подумайте о том, чтобы ответить на вопрос @zgood

Ответ №1:

Добавьте z-index в свой #nav-bar , чтобы разместить его выше, чем «раздел витрины».

z-index: 99999;

Любой элемент, который имеет position значение, отличное от значения по умолчанию для static , может быть размещен по оси z (ваша навигация position: fixed; ). Более высокие цифры находятся сверху.

Вы можете установить очень высокое бессмысленное значение, например 99999, но я рекомендую присвоить ему число, которое имеет смысл и которым вы можете управлять. Найдите z-index «раздел демонстрации» и установите его выше этого. Если не z-index задан параметр, то может сработать простой z-index: 1; (но смысл его навигации в том, что большее число было бы лучше).

Если вы используете sass или меньше, вам будет проще отслеживать, задав переменные для ваших сайтов z-index .

Кроме того, прочитайте о контексте стекирования, потому что это становится сложнее, чем просто установка больших чисел.

Удачи!