By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,626 Members | 1,657 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,626 IT Pros & Developers. It's quick & easy.

negative z-index making links unclickable

HaLo2FrEeEk
100+
P: 404
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
Apr 4 '11 #1
Share this Question
Share on Google+
2 Replies


JKing
Expert 100+
P: 1,206
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.
Apr 4 '11 #2

HaLo2FrEeEk
100+
P: 404
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.)
Apr 4 '11 #3

Post your reply

Sign in to post your reply or Sign up for a free account.