Get A Child Div To Appear Above Absolutely Positioned Parent

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

Solution 1:

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.

Solution 2:

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;
}
}

Solution 3:

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.