Второй загрузчик navbar, перекрывающий выпадающее меню с первого navbar? - PullRequest
Новая
       0

Второй загрузчик navbar, перекрывающий выпадающее меню с первого navbar?

0 голосов
/ 26 октября 2018

У меня есть две панели навигации с фиксированным верхом, раскрывающееся меню первой перекрывается второй панелью навигации.Пробовал возиться с z-index, позиционированием и переполнением. Также нашел пару несколько связанных вопросов, но, похоже, ничего не помогает.Есть идеи, что может быть причиной этого?

Ссылка на FIDDLE

Изображение ниже показывает природу проблемы (раскрывающееся меню 2-й панели навигации):

enter image description here

Пример: 

<!DOCTYPE html>
<html>
<head>
<meta>
<title>Navbar overlapping dropdown-menu</title>

<!-- Bootstrap 4 cdn's & jquery dependency -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>
<body>

    <!-- first navbar with dropdown-menu -->
    <nav class="navbar bg-dark fixed-top navbar-expand-sm">
      <div class="collapse navbar-collapse">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#"> 1 </a>
                  <a class="dropdown-item" href="#"> 2 </a>
              <a class="dropdown-item" href="#"> 3 </a>
              <a class="dropdown-item" href="#"> 4 </a>
            </div>
          </li>
        </ul>
      </div>
    </nav>


    <!-- second navbar with top offset -->
    <nav class="navbar bg-primary fixed-top navbar-expand-sm" style="top:56px!important;">
    <p>hello world</p>
    </nav>

</body>
</html>

Ответы [ 2 ]

0 голосов
/ 26 октября 2018

Добавлены два класса .front и .back и обновлено значение z-index.

Обновлено JSFiddle

CSS: 

.front{
 z-index: 2000 !important;
}
.back{
 z-index: -1 !important; 
}

HTML: 

<!-- first navbar with dropdown-menu -->
<nav class="navbar bg-dark fixed-top navbar-expand-sm front">
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#"> 1 </a>
              <a class="dropdown-item" href="#"> 2 </a>
          <a class="dropdown-item" href="#"> 3 </a>
          <a class="dropdown-item" href="#"> 4 </a>
        </div>
      </li>
    </ul>
  </div>
</nav>


<!-- second navbar with top offset -->
<nav class="navbar bg-primary fixed-top navbar-expand-sm back" style="top:56px!important;">
<p>hello world</p>
</nav>

Справочник по z-index - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index

0 голосов
/ 26 октября 2018

Вы правы, это проблема z-index.Попробуйте добавить несколько стилей, чтобы получить второе значение navbar ниже по z-index.Когда возитесь с z-index, не забудьте отрегулировать родных братьев, которые вызывают проблему.Настройка .dropdown-menu ничего бы не сделала, потому что проблема была с родительскими элементами.

Вы могли бы сделать это: 

.navbar {
  z-index: 90;
}

.navbar+.navbar {
  z-index: 80;
  top:56px;
}
<!DOCTYPE html>
<html>

<head>
  <meta>
  <title>Navbar overlapping dropdown-menu</title>

  <!-- Bootstrap 4 cdn's & jquery dependency -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>

  <!-- first navbar with dropdown-menu -->
  <nav class="navbar bg-dark fixed-top navbar-expand-sm">
    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown"> Dropdown </a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#"> 1 </a>
            <a class="dropdown-item" href="#"> 2 </a>
            <a class="dropdown-item" href="#"> 3 </a>
            <a class="dropdown-item" href="#"> 4 </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>


  <!-- second navbar with top offset -->
  <nav class="navbar bg-primary fixed-top navbar-expand-sm">
    <p>hello world</p>
  </nav>

</body>

</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...