[Webinar] Streamline your web hosting managementRegister Today

  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 816
  • Last Modified:

JavaScript (z-index) layers issue

I have two JavaScript functions conflicting layers at www.shasta.edu.

If you browse there and mouse over the Student Life and Contact Us links in the horizontal navigation menu, you see the expanding menus appear BEHIND the picture, so you cannot read the contents of the fly out menus.

I believe I tried something relating to z-index or layers to the JavaScript of the nav menus appear on TOP of the scrolling images below it, but I still have this problem and not sure how to fix it.  

Your advice/insights will be much appreciated.
1 Solution
You should understand something about z-index. z-index only works on the same nested level.

In your case, the navigation and the scrolling image are in different elements, so creating a higher z-index would have to happen at a higher level.

If you want the navigation to overlap the scrolling image, you would have to do the following on the table-rows of the highest level table:
- The table-row containing your navigation should get position:relative; (just in case) and z-index: 10;. You can do this by adding a class or id to the table row or by directly applying styles using style="position: relative; z-index:10;"
- The tabel-row containing the scrolling image should then get z-index: 5;

I've tested this quick and dirty with Firebug and it works without fail.

Hope this helps,

gmahler5thAuthor Commented:
Perfection!!!  Thanks so much for your quick response.

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now