Question

是否有可能在一个绝对位置div内得到一个div来显示在它的父级之上，但是与它对齐，所以子div的顶部是与父div的底部和子节点的正方形div现在高于与其父母处于同一水平的其他父母？

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

父块绝对定位

<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即可。见This Fiddle

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

}

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

Answer 2

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

另外，请不要忘记将position:absolute添加到您的子级div，同时使z-index生效。

Answer 3

使用此CSS。将overflow = hidden添加到父级并添加z-index就像20 +所以你得到了孩子的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;
}
}

让一个子div显示在绝对定位的父级之上

3 个答案: