父div后面的子div，如何修复链接？ [英] Child div behind parent div, how to fix link?
问题描述
我试图在它的父元素< div> 后面放置一个< div> code>，但链接不起作用。
我正在使用 z-index：-1 ，所以也许链接被绘制在< body> 。
有没有办法在不断开链接的情况下实现这一点？
感谢
CSS
.front {
width：200px;
height：200px;
背景：＃EA7600;
-moz-box-shadow：5px 5px 5px rgba（0,0,0,0.3）;
-webkit-box-shadow：5px 5px 5px rgba（0,0,0,0.3）;
box-shadow：5px 5px 5px rgba（0,0,0,0.3）;
}
.back {
width：300px; height：50px;背景：＃93CDFB;
位置：绝对;
left：100px;
text-align：right;
padding：5px;
HTML
< div class =front>
< div class =back>
< a href =http://www.stackoverflow.com>此连结有效< / a>
< / div>
< / div>
& nbsp;
< div class =frontstyle =z-index：1>
< div class =backstyle =z-index：-1>
< a href =http://www.stackoverflow.com>此连结无效< / a>
< / div>
< / div>
结果
替代文字http://img832.imageshack.us/img832 /8137/screenshot20100723at105.png
我刚刚花了半个小时阅读（非常复杂） CSS规范，但我对定位元素和堆叠上下文有点困惑。然而，在摆弄之后，我发现：
body {
position：relative;
z-index：0;
}
确实有效！因此，
body {
position：absolute;
$ / code $ / pre
这会将body元素转换为新的放置上下文，这意味着body不是html）将作为画布添加到.back div。
I'm trying to put a child <div> (with a link in it) behind its parent <div>, but the links doesn't work.
I am using z-index: -1, so maybe the link is being drawn "behind" the <body>.
Is there a way to achive this without breaking the link?
Thanks
The CSS
.front {
width: 200px;
height: 200px;
background: #EA7600;
-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.back {
width: 300px; height: 50px; background: #93CDFB;
position: absolute;
left: 100px;
text-align: right;
padding: 5px;
}
The HTML
<div class="front">
<div class="back">
<a href="http://www.stackoverflow.com">This link works</a>
</div>
</div>
<div class="front" style="z-index: 1">
<div class="back" style="z-index: -1">
<a href="http://www.stackoverflow.com">This link doesn't work</a>
</div>
</div>
The Result
alt text http://img832.imageshack.us/img832/8137/screenshot20100723at105.png
解决方案 I just spent half an hour reading the (very complex) CSS specs, but I'm a little bit confused about positioned elements and stacking contexts. However, after fiddling around, I found that
body {
position: relative;
z-index: 0;
}
actually works! So does
body {
position: absolute;
}
This will turn the body element into a new stocking context, meaning that body (not html) will serve as a canvas to the .back div.
这篇关于父div后面的子div，如何修复链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![替代文字http://img832.imageshack.us/img832 /8137/screenshot20100723at105.png](\"http://img832.imageshack.us/img832/8137/screenshot20100723at105.png\"){kind=link}
