Get a child div to appear above absolutely positioned parent

Question

Is it possible to get a div, inside an absolutely position div, to show above it's parent, but aligned to it so the top of the child div is square with the bottom of the parent div and the child div is now above other parents on the same level as it's own parent ?

e.g I have a page with square blocks on it, say four rows of four. Inside each block, is a child element which shows on rollover, aligned to the bottom of the parent block and over the top of blocks adjacent to the parent block.

The parent blocks are absolutely positioned

http://jsfiddle.net/W3Kaq/

<div id="container">
<div class="parent">
Some Box
<div class="child">
    Some Child Box
</div>
</div>
<div class="parent" style="left:140px;">
Some Box
<div class="child">
    Some Child Box
</div>
</div>
<div class="parent" style="top:140px;">
Some Box
<div class="child">
    Some Child Box
</div>
</div>
<div class="parent" style="top:140px; left:140px;">
Some Box
<div class="child">
    Some Child Box
</div>
</div>
</div>

#container {
position: relative;
}

.parent {
background: #444;
color: #fff;
display: block;
height: 100px;
padding: 10px;
position: absolute;
width: 100px;
z-index: 2;
}

.child {
background: #777;
display: none;    
height: 300px;
position: absolute;
z-index: 3;
}

.parent:hover .child {
display: block;
}

If the parent DIVs are all at the same z-index level then they will be layered in the order they appear in the code with the later ones on top of the earlier ones, irrespective of what's inside of them. Ultimately any child elements obtain the z-index of their parent when compared to any elements outside of the parent, however within their parent the z-index applies as you'd imagine amongst other elements inside that parent. — Darren Crabb, Oct 30 '13 at 11:51
OK so maybe on hover, I need to increase the z-index of the parent ? — Rich, Oct 30 '13 at 12:09
No, just remove the z-index of the parent. It's still not entirely clear what it is you are trying to so. Is it something like this: http://jsfiddle.net/Paulie_D/W3Kaq/1/ ? — Paulie_D, Oct 30 '13 at 12:10
@Paulie_D removing the z-index does not work, however if I set the parents z-index to 999 on rollover, it works :) — Rich, Oct 30 '13 at 12:12
@Paulie_D you got the idea but I can't take away the absolute positioning or z-index of the parent because of how the page works. Just upping the z-index of the hovered parent produces the required effect, thanks guys for the help — Rich, Oct 30 '13 at 12:15

score 0 · Answer 1 · answered Oct 30 '13 at 12:02

0

Use z-index on your child div and set a positive number on it e.g. 999.

Also don't forget to add position:absolute to your child div also for z-index to take effect.

answered Oct 30 '13 at 12:02

Dr Robotnik

352
1
4
14

score 0 · Answer 2 · answered Oct 30 '13 at 12:31

use this css. add overflow = hidden to parent and add z-index like 20 + so you get child div apper.

#container {
position: relative;
}

.parent {
background: #444;
color: #fff;
display: block;
height: 100px;
padding: 10px;
position: absolute;
width: 100px;
z-index: 2;
overflow:hidden
 }

.child {
background: #777;
display: none;    
height: 300px;
position: absolute;
z-index: 3;
}

.parent:hover .child {
display: block;
z-index:0;
}
}

score 0 · Answer 3 · answered Oct 30 '13 at 12:37

Just remove the z-index for the parent and this will work. See This Fiddle

.parent {
    background: #444;
    color: #fff;
    display: block;
    height: 100px;
    padding: 10px;
    position: absolute;
    width: 100px;

}

Not sure if this is will affect other things in your code.

Get a child div to appear above absolutely positioned parent

3 Answers3

Linked