Cant click div with links behind another div Absolute Position wont work

Question

I have a div behind another div with html links. The problem is this div is in a jquery made content slider. And because of this i cant click the links on the div thats underneath. Is there a way i can make it clickable. I tried position:absolute but it did not work. Maybe there is a jquery hack or something?

The div that blocks my navigation div is called "maincontent" and the navigation div is called "nav" the problem is the maincontent div is over the "nav" div because i used margin-top: -60px; due to how i needed to code it.

Answer 1

Add position:relative to the nav bar. Didn't do it? It's because maincontent has a z-index set on it. Add one too to the nav block and make sure it's higher than the one set on maincontent. That's it I guess.

Answer 2

If you are sure that making nav appear over maincontent will not cause any visual problems (like nav obstructing some content of maincontent) - then you can try using the CSS property z-index on both these DIVs, and setting the z-index of nav to be higher (like 100) than the z-index of maincontent (maybe 50 - the numbers are totally arbitrary, just check if there are any other elements with z-index settings in your layout and don't clash with those).

Of course, beware of the horrid IE, it has some weird issues with relative (or was that absolute?) positioning and z-index.

Answer 3

I had the same issue.

My problem was that if I changed the z-index to >0 then the problems with breaking design came up.

Since my page had static elements I made the buttons fit into their positions but without them being in the container with the other elements.

I had:

.container#body-container

    #menu-buttons
        .menu-item#One
        .menu-item#Two
        .menu-item#Three
        .menu-item#Four
        .menu-item#Five

when things began breaking up so I changed it to

#nav-menu-container
    #One
    #Two
    #Three
    #Four
    #Five


.container#body-container

    #menu-buttons
        .menu-item
        .menu-item
        .menu-item
        .menu-item
        .menu-item

I know it's a bit hacky but this is the best I got so far.