Search code examples
htmlcsszurb-foundationz-index

Strange CSS / z-index behaviour

I'm having a heck of a time working out why some elements on this page are 'punching through' layers above.

I've tried a range of tweaking using Developer Tools (positioning, floats, z-index, opacity, etc) and cannot work out what's causing this.

The minimal test case is here: http://jsfiddle.net/qae1wx0v/3/

And the specific issues are:

  1. The dropdown menu to the right of the main heading is 'punching through' (sitting above) the main dropdown menu in the stacking order.
  2. The breadcrumb separators (::after pseudo elements) are also seem to be sitting above the main dropdown menu in the stacking order.

You can see this by mousing over the main dropdown and noticing those elements further down the page appearing 'through' (i.e. sitting above) the main menu.

Any solutions that ensure the main dropdown nav appears above elements lower down the page is very much appreciated. Thank you in advance!

UPDATE: The fix ended up being very simple (I was having dev tool issues)...

.sticky-container {
  z-index: 1;
}

Thanks Ahmad Salameh!

SEO keywords In case others are having similar issues, this relates to Zurb Foundation framework (which I hadn't mentioned before), Sticky elements, their Dropdown menus and the interplay between the stacking orders.

Solution

  • I've seen your page and the problem is so easy to solve just for this div :

    <div data-sticky-container="" class="sticky-container" style="height: 152.5px;">

    Set the z-index to 1;

    I hope i understand you, If not please include your code above.