Html 由于 z-index，链接不可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13798446/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Links not clickable because of z-index
提问by user1251698
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.
我在页面上有一个绝对位置的 div，它在滚动时与另一个 div 重叠。当它滚动到特定的 div 时，我想让它不可见。
For that purpose, I'm using the z-index. I'm setting the z-index1 of the div which I want to hide, and much higher z-indexfor the other div. However it does not hide the div. If I set the z-indexto -1 then it hides but then the links on that div are no more clickable. How can I fix this?
为此，我正在使用z-index. 我正在设置z-index要隐藏的 div的1，而z-index另一个 div 的设置要高得多。但是它不会隐藏 div。如果我将其设置z-index为 -1，则它会隐藏，但该 div 上的链接不再可点击。我怎样才能解决这个问题？
Here's my code:
这是我的代码：
HTML:
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:
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-indexvalue), and if I set it positive, it wont hide behind the .down.
所以上面例子中的问题是 .box 中的链接不可点击（因为 -vez-index值），如果我将它设置为正数，它不会隐藏在 .down 后面。
JSFiddle:http://jsfiddle.net/G2xRA/
JSFiddle：http : //jsfiddle.net/G2xRA/
回答by Shailender Arora
Actually z-indexonly works with positionso I gave the position:relative;to your .downclass.
实际上z-index只适用于position所以我给了position:relative;你的.down班级。
See the mentioned below CSS& DEMO.
请参阅下面提到的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;
}
回答by Jamie Hutber
In order for z-index's to go on top of each other you will both elements to have positioned.
为了让 z-index 彼此重叠，您将两个元素都定位。
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).
定义和用法
z-index 属性指定元素的堆栈顺序。
具有较大堆栈顺序的元素始终位于具有较低堆栈顺序的元素之前。
注意：z-index 仅适用于定位元素（位置：绝对、位置：相对或位置：固定）。
So you will need:
所以你需要：
.up {
height: 100px;
position: absolute;
}
回答by AspiringCanadian
.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.
在类中进行这 2 处更改。Z-index 在 .down 中不起作用，因为您没有放置位置。而且，.box 中不需要 -ive z-index。Z-index 像图层一样工作，z-index 为 1 的元素将位于 z-index 大于 1 的任何元素下。当然要使其工作，元素需要定位。
回答by Enes
I had the same problem too. I solved it by changing the z-indexvalues with a value greater than -1.
我也有同样的问题。我通过将z-index值更改为大于 -1 的值来解决它。
I made the front layer 2 and behind 1, so it worked.
我做了前层 2 和后层 1，所以它起作用了。
