title: Packery grid overlays Bootstrap 4 menu notifications dropdown
body: <p>I'm building a site using Bootstrap 4 that has a notification dropdown, which is intended, naturally, to overlay the content of the main body of the page. The problem is, even with z-index: 10000 on the dropdown, the Packery grid items continue to appear over the menu.</p>
  
  <p>I cannot for the life of me figure out why this is, and various combinations of z-index, position:absolute, position:relative, and every other trick I could think of have failed. Popovers using popover.js do position correctly over Packery, interestingly enough.</p>
  
  <p>Any suggestions for solutions to this?</p>
  
  <p>Since Codepen links need code, here's the dropdown code, though that won't help you much. </p>
  
  <pre><code>&lt;li class="nav-item dropdown dropper"&gt;
                &lt;a class="nav-link text-light" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;
                  &lt;i class="fa fa-bell"&gt;Notifications&lt;/i&gt;
                &lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                    &lt;li class="head text-light bg-dark"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-lg-12 col-sm-12 col-12"&gt;
                          &lt;span&gt;Notifications (3)&lt;/span&gt;
                          &lt;a href="" class="float-right"&gt;Mark all as read&lt;/a&gt;
                        &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="notification-box"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-lg-3 col-sm-3 col-3 text-center"&gt;
                          &lt;img src="/demo/man-profile.jpg" class="w-50 rounded-circle"&gt;
                        &lt;/div&gt;    
                        &lt;div class="col-lg-8 col-sm-8 col-8"&gt;
                          &lt;strong class="text-info"&gt;David John&lt;/strong&gt;
                          &lt;div&gt;
                            Lorem ipsum dolor sit amet, consectetur
                          &lt;/div&gt;
                          &lt;small class="text-warning"&gt;27.11.2015, 15:00&lt;/small&gt;
                        &lt;/div&gt;    
                      &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="notification-box bg-gray"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-lg-3 col-sm-3 col-3 text-center"&gt;
                          &lt;img src="/demo/man-profile.jpg" class="w-50 rounded-circle"&gt;
                        &lt;/div&gt;    
                        &lt;div class="col-lg-8 col-sm-8 col-8"&gt;
                          &lt;strong class="text-info"&gt;David John&lt;/strong&gt;
                          &lt;div&gt;
                            Lorem ipsum dolor sit amet, consectetur
                          &lt;/div&gt;
                          &lt;small class="text-warning"&gt;27.11.2015, 15:00&lt;/small&gt;
                        &lt;/div&gt;    
                      &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="notification-box"&gt;
                      &lt;div class="row"&gt;
                        &lt;div class="col-lg-3 col-sm-3 col-3 text-center"&gt;
                          &lt;img src="/demo/man-profile.jpg" class="w-50 rounded-circle"&gt;
                        &lt;/div&gt;    
                        &lt;div class="col-lg-8 col-sm-8 col-8"&gt;
                          &lt;strong class="text-info"&gt;David John&lt;/strong&gt;
                          &lt;div&gt;
                            Lorem ipsum dolor sit amet, consectetur
                          &lt;/div&gt;
                          &lt;small class="text-warning"&gt;27.11.2015, 15:00&lt;/small&gt;
                        &lt;/div&gt;    
                      &lt;/div&gt;
                    &lt;/li&gt;
                    &lt;li class="drop-footer bg-dark text-center"&gt;
                      &lt;a href="" class="text-light"&gt;View All&lt;/a&gt;
                    &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
  </code></pre>
  
  <p>Here is the link to a Codepen with one of the pages that is having this issue-- the icons don't work, so the "Notifications" next to the nonexistent picture is the relevant dropdown.  <a href="https://codepen.io/redheadedmandy/pen/ZxmxgN" rel="nofollow noreferrer">https://codepen.io/redheadedmandy/pen/ZxmxgN</a></p>