css - 让子 div 出现在绝对定位的父级上方

Question

是否可以在绝对位置 div 内获得一个 div，以显示在其父级上方，但与其对齐，因此子 div 的顶部与父 div 的底部呈正方形，并且子 div 现在位于其他父级之上和自己的父母一样的水平？

例如，我有一页上面有方形块，比如四行四行。在每个块内，都有一个子元素，它在翻转时显示，与父块的底部对齐，并在与父块相邻的块的顶部上方。

父块是绝对定位的

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

Answer 1

z-index在您的孩子 div 上使用并在其上设置一个正数，例如 999。

也不要忘记添加position:absolute到您的子 div 以z-index使其生效。

Answer 2

只需删除父级的 z-index 即可。看到这个小提琴

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

}

不确定这是否会影响代码中的其他内容。

Answer 3

使用这个 CSS。将溢出=隐藏添加到父级并添加像 20 + 这样的 z-index，这样你就可以得到子 div 了。

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