Child div behind parent div, how to fix link?_问答_开发者

Child div behind parent div, how to fix link?

开发者 https://www.devze.com 2023-01-08 21:32 出处：网络

I\'m trying to put a child <div> (with a link in it) behind its parent <div>, but the links doesn\'t work.

相关专题：css

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>


&nbsp;


<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