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 z-index
. I'm setting the z-index
1 of the div which I want to hide, and much higher z-index
for the other div. However it does not hide the div. If I set the z-index
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:
<div class="wrap"> <div class="up"><div class="box"><a href="#">Should hide</a></div></div> <div class="down">Should be visible</div> </div>
CSS:
.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; }
So the problem in above example is that the links in the .box are not clickable (because of -ve z-index
value), and if I set it positive, it wont hide behind the .down.
JSFiddle: http://jsfiddle.net/G2xRA/
Possible fixes By default, Studio sets the z-index between 999999 - 1000000. If a site element must expand over an ad, ensure that its z-index is higher than that of the creative. If a site element must appear under an ad expansion, set its z-index at 999998 or lower.
z-index only works on positioned elements (relative, absolute, fixed, sticky) so if you set a z-index on an element with a static position, it won't work.
The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
Actually z-index
only works with position
so I gave the position:relative;
to your .down
class.
See the mentioned below CSS & DEMO.
.box{ position: absolute; top: 20px; background: yellow; width: 100px; height: 100px; z-index: 1; } .down { background: none repeat scroll 0 0 green; height: 400px; overflow: hidden; position: relative; z-index: 2; }
DEMO
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With