Bootstrap 4 Pacery grid overlays引导4菜单通知下拉列表

Bootstrap 4 Pacery grid overlays引导4菜单通知下拉列表,bootstrap-4,overlay,z-index,dropdown,packery,Bootstrap 4,Overlay,Z Index,Dropdown,Packery,我正在使用Bootstrap4构建一个站点,该站点有一个通知下拉列表,这自然是为了覆盖页面主体的内容。问题是,即使z-index:10000位于下拉列表中,封隔器网格项仍会继续出现在菜单上 我一辈子都搞不懂为什么会这样,而且z指数、位置:绝对、位置:相对以及我能想到的所有其他技巧的各种组合都失败了。有趣的是,使用popover.js的popover确实在Packery上正确定位 有什么建议可以解决这个问题吗 由于Codepen链接需要代码,下面是下拉代码,尽管这对您帮助不大 <li cla

我正在使用Bootstrap4构建一个站点,该站点有一个通知下拉列表,这自然是为了覆盖页面主体的内容。问题是,即使z-index:10000位于下拉列表中,封隔器网格项仍会继续出现在菜单上

我一辈子都搞不懂为什么会这样,而且z指数、位置:绝对、位置:相对以及我能想到的所有其他技巧的各种组合都失败了。有趣的是,使用popover.js的popover确实在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>
    • 通知(3)
    • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00
    • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00
    • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00

  • 这是一个代码笔的链接,其中一个页面出现了这个问题——图标不起作用,因此不存在的图片旁边的“通知”是相关的下拉列表

    使用引导预定义类。相对于ul列表下拉菜单的位置。检查下面的代码笔工作演示

    <!-- 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>
    

    
    搜寻
    
      • 通知(3)
      • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00
      • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00
      • 大卫·约翰 洛雷姆·伊普苏姆·多洛·希特·阿梅特,康塞特图 27.11.2015, 15:00
    • 下拉标题