CSS Z-index declarations for SuperFish Menu

Question

I am having a problem with z-indexing on a website I am maintaining. It appears to be caused by z-indexing in the SuperFish Menu and a div. However, no matter where I put the position:relative/absolute & z-index: 99999 declarations, the menu is still getting stuck behind the third panel on the right.

To see this problem, you need to hover over Practice Areas, Then Real Estate. You will notice the sub-menu getting stuck behind the panel.

It's driving me nuts trying to figure this out.

The website is: http://174.120.240.5/~rushmars/

Answer 1

You have too much positioned elements. Lets look at the whole thing in a tree.

• body - position: relative
  • #main
    • header - position: relative; z-index: 99
    • .primary_content_tail - position: relative; z-index: 9300
  • footer

As MDN says

A stacking context is formed, anywhere in the document, by any element which is [...] positioned (absolutely or relatively) with a z-index value other than "auto"

So we have two stacking contexts so the menu which is in the header will always be behind the content. Try to set z-indeces to auto (inline). Now we have

• body - position: relative
  • #main
    • header - position: relative; z-index: auto
    • .primary_content_tail - position: relative; z-index: auto
  • footer

And it works as expected in Chrome Canary and Firefox Aurora. If you need the initial z-indeces you might need to create a new layer (stacking context) for the menu.