luckywitch
New Member
I have a div with absolute position on a page which overlaps on another div when scrolling. I want to make it invisible when it scrolls to a specific div. For that purpose, I'm using the \[code\]z-index\[/code\]. I'm setting the \[code\]z-index\[/code\] 1 of the div which I want to hide, and much higher \[code\]z-index\[/code\] for the other div. However it does not hide the div. If I set the \[code\]z-index\[/code\] to -1 then it hides but then the links on that div are no more clickable. How can I fix this?Here's my code:HTML:\[code\]<div class="wrap"> <div class="up"><div class="box"><a href="http://stackoverflow.com/questions/13798446/#">Should hide</a></div></div> <div class="down">Should be visible</div></div>\[/code\]CSS:\[code\].wrap{ width: 300px; position: relative; overflow: hidden; border: 1px solid #000;}.up{ height: 100px; }.box{ position: absolute; top: 20px; background: yellow; width: 100px; height: 100px; z-index: -1; }.down{ background: green; overflow: hidden; z-index: 200; height: 400px;}\[/code\]So the problem in above example is that the links in the .box are not clickable (because of -ve \[code\]z-index\[/code\] value), and if I set it positive, it wont hide behind the .down.JSFiddle:http://jsfiddle.net/G2xRA/