ansaurus

Question

Child div behind parent div, how to fix link?

Answer 1

A:

maybe for the front one: display:inline or float:left

BobTurbo 2010-07-24 03:09:40

thanks but doesn't work

Victor P 2010-07-24 03:13:48

Answer 2

A:

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.

Pat 2010-07-24 03:16:23

Thanks Pat but I am not able to change the fact that the teal box is a child of the orange box. Is there a way to do it without touching the Html?

Victor P 2010-07-24 03:18:51

Unfortunately no - as you've discovered, stacking a child under its parent is sketchy at best. To be honest, I'd never even tried a negative z-index, so I was surprised at the result.

Pat 2010-07-24 03:20:55

Answer 3

A:

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?

Jty.tan 2010-07-24 05:28:08

thanks but didn't work

Victor P 2010-07-24 16:43:03

Answer 4

+2 A:

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.

Pumbaa80 2010-07-24 07:23:13

Thank you! Worked perfectly!

Victor P 2010-07-24 16:45:16

ansaurus

tags:

views:

answers:

Child div behind parent div, how to fix link?

related questions