Is it possible to have a child div within an absolutely positioned parent div appear above its parent, aligned in such a way that the top of the child div aligns with the bottom of the parent div, while also being displayed above neighboring parent divs on the same level?
For example, imagine a page with a grid of square blocks, arranged in rows and columns. Each block contains a child element that is revealed on hover, positioned at the bottom of the parent block and overlapping adjacent blocks.
The parent blocks are positioned absolutely.
<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;
}