negative z-index making links unclickable

[HaLo2FrEeEk]

I'm working on a project and I decided to add a sidebar to show a little more information. I made the sidebar a child of the main body container, which is a 720px width div, and gave it a position: absolute, then set it's right position so that it appears at the left edge of the container. The body container has a box shadow, and I want the sidebar to look like it's coming out from under the container, so I set it's z-index to -100. Unfortunately, this makes the links that I put inside it unclickable, since I guess it's being covered by the body container. The thing is, the body is only 720px wide, it doesn't cover the whole page. How can I get it so that the sidebar is underneath the container, making the shadow from the body appear on top of the sidebar, but still have the links clickable?

I'll continue working on it, but here's the page I'm working on:

http://reachchallenges.infectionist.com

[JKing]

What you can do is make the sidebar div position behind as you have but then remove the links from it. Add them to a separate div, and overlay that on top with a transparent background. This way the div with your links is now on the top of the stacking order while the background remains visually correct.

Another possibility is using an area map.

[HaLo2FrEeEk]

Maps don't work with Chrome, as far as I know. How can I have the links in a separate div, yet still be able to position it in the proper place. If I make the div with the links a child of the main sidebar div, then it'll inherit its z-index. Even if I change it to something higher, since it's still inside the lower-positioned element it won't work. I tried that. I can't think of a way that I'd be able to put the links div outside of the sidebar div and still have it behave normally (stretching to fit the contents, position, etc.)