父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屋!