Child div behind parent div, how to fix link?
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: 5p开发者_运维知识库x 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.
maybe for the front one: display:inline or float:left
There is indeed. If you check this jsfiddle, you'll see it in action.
As you suspected, it was the -1 z-index causing you trouble. By moving the teal container outside the orange one and giving a z-index to the orange container, you're able to maintain the stacking order and the link still works.
How about giving the child link a larger z-index?
So for the CSS
.back a {
z-index: 50
}
& leave the others as they currently are?
加载中,请稍侯......
精彩评论