Links not clickable because of z-index

问题:

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/

回答1:

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

回答2:

In order for z-index's to go on top of each other you will both elements to have positioned.

A better description:

Definition and Usage

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.

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

So you will need:

.up {     height: 100px;     position: absolute; } 

回答3:

.box{     position: absolute;     top: 20px;     background: yellow;     width: 100px;     height: 100px;     z-index: 1;   }  .down{     background: green;     overflow: hidden;     z-index: 2;     height: 400px;     position:relative; } 

Make these 2 changes in the classes. Z-index won't work in .down as you didn't put position. And, there is no need for the -ive z-index in .box. Z-index works like layers, an element with z-index 1 will be under any element that has higher z-index than 1. Ofcourse for this to work the elements need to be positioned.

回答4:

I had the same problem too. I solved it by changing the z-index values with a value greater than -1.

I made the front layer 2 and behind 1, so it worked.

文章来源: Links not clickable because of z-index