seo Question posted in
Some basic information to get you started with this can be found here.

Strange CSS / z-index behaviour – SEO

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.

Tags:

3

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    OK, shooting with my eyes closed here because I can’t see anything (all I see is a login), but all my issues with z-index have come down to competing stacking contexts.

    This is maybe best explained with a simple example. Consider this HTML:

    <div class="parent">
    <div class="child-1">
        <div class="grandchild-1"></div>
    </div>
    <div class="child-2">
        <div class="grandchild-2"></div>
    </div>
</div>

    Now, imagine you wanted the grandchild elements to be displayed one on top of the other. If you give grandchild-1 a z-index of 10 and grandchild-2 and z-index of 11, grandchild-2 shows on top, right?

    That’s true, unless child-1 has a higher z-index than child-2. If child-1’s z-index is 10 and child-2’s z-index is 9, all of child-2’s elements will sit under child-1’s.

    This is because each time you assign an element a display value of either absolute or relative (regardless of whether you set a z-index), you essentially create two new stacking indexes; one for its children, and one for it and its siblings. And all stacking indexes are calculated from the root of the DOM tree up (or the top down, depending on how your brain works).

    Keep in mind that z-index has no effect without a display value of absolute or relative.

    Login or Signup to reply.
  3. 0

    That is really easy to solve buddy, do not EVER use pooptstrap

    Ok now, to fix all that disgusting and unnecessary nesting mess of html and css that poopstrap created, paste this code at the VERY BOTTOM of your HTML

    <style media="screen">
  .sticky-container{
    z-index: 100;  }
    .is-dropdown-submenu-parent{
      z-index: 1;
    }
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search