How can I give a child element of one parent a higher z-index than another parent?

Question

I have a sidebar split into two divs with an equal z-index.

The first div, top , has a link that shows another div, hover when you hover over it.

hover extends down into the bottom div, bottom , but since top and bottom have the same z-index, hover is covered by bottom .

No matter how high of a z-index I give bottom , that only affects how it is displayed within top . How can I get it to cover up bottom ?

By the way, I also want to do the same thing to bottom , so there will be a bottom-hover that should cover up top .

So giving top and bottom different z-indexes isn't an option.

Here's a fiddle to demonstrate: http://jsfiddle.net/tsnuh7q1/

html:

<div class="top">top
    <div class="hover">HOVER</div>
</div>
<div class="bottom">bottom<div>

css:

.top {
    width: 200px;
    height: 100px;
    background: blue;
    z-index: 3;
    position: relative;
}
.hover {
    z-index: 40;
    width: 170px;
    height: 300px;
    position: absolute;
    background: red;
    left: 30px;
}
.bottom {
    width: 200px;
    height: 100px;
    background: green;
    z-index: 3;
    position: relative;
}

Answer 1

The child z-index is always in the context of the parent.

Take

#A { z-index: 1; }
#B { z-index: 2; }

#A * { z-index: 1000; }

children of #A will always be under #B and it's children. The context of their z-index is a lower layer.

Answer 2

Came accross this question whilst searching for a solution for my own issue. Couldn't help but giving it a go.

If I understand correctly what you're trying to do why not do it like this?

http://jsfiddle.net/tsnuh7q1/2/

 .top, .bottom { width: 100%; height: 100px; background: lightblue; position: relative; } .bottom { background: green; } .hover { position: absolute; top: 0; left: 10%; display: none; width: 100px; height: 150px; background: red; } a:hover .hover { display: block; } .bottom .hover { top: initial; left: initial; right: 10%; bottom: 0; } .top:hover, .bottom:hover { z-index: 1; } 

 <div class="top">top <a href="#0">link<div class="hover">HOVER</div></a> </div> <div class="bottom">bottom <a href="#0">link<div class="hover">HOVER</div></a> <div>