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.

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.

• javascript
• jquery
• html
• css

• Wow, kindly demarcate the DIV with clear id names in your question, it's confusing which DIV is what. – Aditya M P Commented Jul 8, 2012 at 2:06
• Well one div is a large div called "maincontent" and the div under it is called "nav" but links dont work on it/ – soniccool Commented Jul 8, 2012 at 2:09
• 1 Can you please add those names in parantheses near the words 'div' repeated throughout the question? – Aditya M P Commented Jul 8, 2012 at 2:09
• 1 Comment here so that I get pinged, once done :) – Aditya M P Commented Jul 8, 2012 at 2:13

3 Answers 3

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.

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.

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.