JavaScript (z-index) layers issue

Posted on 2007-08-09
Last Modified: 2013-11-05
I have two JavaScript functions conflicting layers at

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.
Question by:gmahler5th
    LVL 17

    Accepted 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,


    Author Comment

    Perfection!!!  Thanks so much for your quick response.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now