Foundation-sites: Position Relative elements show on top of dropdown sub-menus

Created on 21 Mar 2017 · 6Comments · Source: foundation/foundation-sites

How to reproduce this bug:

Download a fresh copy of Foundation 6.3.1, including all components and flex grid.

In the example index.html file, add the following just below the <body> tag:

<div data-sticky-container>
  <div class="top-bar" data-sticky data-options="marginTop:0;" style="width:100%">
    <div class="top-bar-title">
      <span data-responsive-toggle="responsive-menu" data-hide-for="medium">
        <button class="menu-icon dark" type="button" data-toggle></button>
      </span>
      <strong>Site Title</strong>
    </div>
    <div id="responsive-menu" class="top-bar-left">
      <ul class="dropdown menu" data-dropdown-menu>
        <li>
          <a href="#">One</a>
          <ul class="menu vertical">
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</div>
<div class="row">
  <div class="large-12 columns">
    <h1>Welcome to Foundation</h1>
    <div class="callout">
        <h3>Here's a bunch of content in a callout panel.</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
            incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
            deserunt mollit anim id est laborum.
        </p>
    </div>
  </div>
</div>

Load the page; resize to a medium screen; and point to the "One" dropdown menu in the top-bar.

What should happen:

The items in the dropdown menu should be visible on-screen, on top of other content of the page.

What happened instead:

Dropdown items are displayed underneath the div.callout panel provided in the example.

Test case:

https://codepen.io/anon/pen/MpVoYb

Observation

This is an issue that relates generally to elements with position: relative showing on top of the sub-menu, which is position: absolute. This also occurs when there are breadcrumbs on the page: the / character used in breadcrumb lists is pos relative, and shows up on top of the sub-menu.

(Produced in Chrome 57 64-bit)

Hacktoberfest Sticky scss 🐛bug

Source

GriceTurrble

Most helpful comment

z-index is causing issue here ".top-bar" doesn't have z-index just add this it'll solve this issue
.top-bar {
z-index: 1;
}

satyajit11 on 23 Mar 2017

👍2

All 6 comments

Well, the root cause is a z-index issue. It seems that the z-index for .sticky is explicitly set to 0 (not sure why) when the element is fixed which, I guess, applies to the entire nav. There's no z-index set for callout but, as you pointed out, that relative positioning kicks in and ends up getting priority somehow.
Two ways I was able to prevent this without apparent side effects were:

turning off relative positioning for callouts
explicitly set sticky z-index to 1
Not sure if either of those would be the appropriate fix, though.

gpspake on 23 Mar 2017

z-index is causing issue here ".top-bar" doesn't have z-index just add this it'll solve this issue
.top-bar {
z-index: 1;
}

satyajit11 on 23 Mar 2017

👍2

Yes, putting z-index: 1 on .top-bar fixed the issue on my side, as well.

GriceTurrble on 23 Mar 2017

I wonder, though, if modifying the sticky component would be more appropriate as that seems to be what's causing the issue. Top-bar probably doesn't need a z-index to be set explicitly. The fact that top bar happens to be the component that sticky was used on here is coincidental; the same issue could likely occur in other components that are set to sticky as long as that z-index is explicitly set to 0 when it's in its fixed position.

gpspake on 23 Mar 2017

Definitely odd. @colin-marshall, you've looked at sticky a fair amount... what do you think?

kball on 5 Apr 2017

I was having a similar issue: a dropdown menu would show up underneath an off-canvas element. I looked in the documentation (Foundation 6.6.3) for off-canvas & it listed the highest Z-index as 13, so I set the z-index for that menu to 14 & it works great.