让孩子div出现在绝对定位的父级之上 [英] Get a child div to appear above absolutely positioned parent

问题描述

是否有可能在绝对位置div内部获得一个div，以显示它的父级，但与其对齐，所以子div的顶部与父级div的底部成正方形，并且子div现在位于上方其他父母与自己的父母在同一级别？

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

父项块绝对定位

http://jsfiddle.net/W3Kaq /

 < div id =container> 
< div class =parent> 
 Some Box 
< div class =child> 
一些小孩盒子
< / div> 
< / div> 
< div class =parentstyle =left：140px;> 
 Some Box 
< div class =child> 
一些小孩盒子
< / div> 
< / div> 
< div class =parentstyle =top：140px;> 
 Some Box 
< div class =child> 
一些小孩盒子
< / div> 
< / div> 
< div class =parentstyle =top：140px; left：140px;> 
 Some Box 
< div class =child> 
一些小孩盒子
< / div> 
< / div> 
< / div> 
 
 #container {
 position：relative; 
} 
 
 .parent {
背景：＃444; 
颜色：#fff; 
 display：block; 
 height：100px; 
 padding：10px; 
位置：绝对; 
 width：100px; 
 z-index：2; 
} 
 
 .child {
背景：＃777; 
 display：none; 
 height：300px; 
位置：绝对; 
 z-index：3; 
} 
 
 .parent：hover .child {
 display：block; 
} 
  

解决方案

为父母，这将工作。请参阅这把小提琴

  .parent {
背景：＃444; 
颜色：#fff; 
 display：block; 
 height：100px; 
 padding：10px; 
位置：绝对; 
 width：100px; 
 
 
 $ / code> 

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

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 and the child div is now above other parents on the same level as it's own parent ?

e.g I have a page with square blocks on it, say four rows of four. Inside each block, is a child element which shows on rollover, aligned to the bottom of the parent block and over the top of blocks adjacent to the parent block.

The parent blocks are absolutely positioned

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

解决方案

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.

这篇关于让孩子div出现在绝对定位的父级之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！