得到一个小孩的div出现在绝对定位的父母

是否有可能获得一个绝对位置div内的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; 
}

来源

2013-10-30 Rich

请向我们展示您的HTML ...应该很简单。 –

如果父级DIV全部处于相同的z-index级别，那么它们将按照它们在代码中出现的顺序进行分层，而后者将在先前的级别上进行分层，而不管其中的内容是什么。最终，任何子元素在获得父级的任何元素时都会获得其父级的z-index，但是在其父级中，z-index会按照您在该父级中其他元素所设想的那样应用。 –

好，所以也许在悬停，我需要增加父母的z-index？ – Rich

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

另外不要忘记添加position:absolute您的孩子div也为z-index生效。

来源

2013-10-30 12:02:42

使用此css。将overflow = hidden添加到父项并添加像20 +一样的z-index，以便获得子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; 
} 
}

来源

2013-10-30 12:31:43

只要删除家长的Z索引，这将工作。请参阅This Fiddle

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

}

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

来源

2013-10-30 12:37:52

得到一个小孩的div出现在绝对定位的父母

回答

相关问题