Packery 网格覆盖 Bootstrap 4 菜单通知下拉菜单

Question

我正在使用具有通知下拉菜单的 Bootstrap 4 构建一个网站，该下拉菜单自然是为了覆盖页面主体的内容。问题是，即使 z-index: 10000 在下拉菜单中，Packery 网格项目仍会出现在菜单上。

我一生都无法弄清楚为什么会这样，并且 z-index、position:absolute、position:relative 以及我能想到的所有其他技巧的各种组合都失败了。有趣的是，使用 popover.js 的弹出框确实可以正确定位在 Packery 上。

对此有什么建议吗？

由于 Codepen 链接需要代码，这里是下拉代码，虽然这对您没有多大帮助。

<li class="nav-item dropdown dropper">
              <a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bell">Notifications</i>
              </a>
                <ul class="dropdown-menu">
                  <li class="head text-light bg-dark">
                    <div class="row">
                      <div class="col-lg-12 col-sm-12 col-12">
                        <span>Notifications (3)</span>
                        <a href="" class="float-right">Mark all as read</a>
                      </div>
                  </li>
                  <li class="notification-box">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="notification-box bg-gray">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="notification-box">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="drop-footer bg-dark text-center">
                    <a href="" class="text-light">View All</a>
                  </li>
                </ul>
            </li>

这里是 Codepen 的链接，其中一个页面存在此问题 - 图标不起作用，因此不存在的图片旁边的“通知”是相关的下拉菜单。 https://codepen.io/redheadedmandy/pen/ZxmxgN

Answer 1

使用引导预定义类 .position-relative 到 ul 列表下拉菜单。查看下面的 codepen 工作演示。

<!-- top nav -->
<div class="mainnav">
  <nav class="navbar">
    <form class="form-inline right-align">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
    <ul class="navbar-nav main-ul">
      <li class="nav-item dropdown dropper">
              <a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa fa-bell">Notifications</i>
              </a>
                <ul class="dropdown-menu position-relative">
                  <li class="head text-light bg-dark">
                    <div class="row">
                      <div class="col-lg-12 col-sm-12 col-12">
                        <span>Notifications (3)</span>
                        <a href="" class="float-right">Mark all as read</a>
                      </div>
                  </li>
                  <li class="notification-box">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="notification-box bg-gray">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="notification-box">
                    <div class="row">
                      <div class="col-lg-3 col-sm-3 col-3 text-center">
                        <img src="/demo/man-profile.jpg" class="w-50 rounded-circle">
                      </div>    
                      <div class="col-lg-8 col-sm-8 col-8">
                        <strong class="text-info">David John</strong>
                        <div>
                          Lorem ipsum dolor sit amet, consectetur
                        </div>
                        <small class="text-warning">27.11.2015, 15:00</small>
                      </div>    
                    </div>
                  </li>
                  <li class="drop-footer bg-dark text-center">
                    <a href="" class="text-light">View All</a>
                  </li>
                </ul>
            </li>
      <li class="nav-item pic-dropper">
          <a href="#" class="nav-link" id="dropdownMenuButton" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><img src="images/prof-pic.jpg" class="profpic float-right" alt="Profile picture"></a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuLink">
              <h6 class="dropdown-header">Dropdown header</h6>
              <div class="dropdown-divider"></div>
                <ul class="notification-list">
                  <li class="notification-item">

                  </li>
                </ul>
            </div>
      </li>
  </ul>
  </nav>
</div>

https://codepen.io/raj_mutant/pen/eMbLmX