css - 父位置：绝对和子 z-index

Question

我想为孩子的 .bricks 设置更高的 z-index，这样它们就可以始终与其他父母重叠（红色方块）。父级必须绝对定位。

现场示例：http: //jsfiddle.net/yJ62e/

html

<div class="cont">
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
<div class="draggable" id="b2">
<div class="brick"></div>
<div class="brick"></div>
<div class="brick"></div>
</div>
</div>

css

    .cont {
    position:relative;
background-color: #747373;
height: 300px;
width: 300px;
margin:0 auto;
    }
.draggable {
    background-color: red;
right:100px;
cursor:pointer;
z-index:1;
position:absolute;
}

    #b2 {
height: 100px;
width: 100px;
}

.brick {
     background-color: blue;
height: 50px;
width: 50px;
float: left;
z-index:999 !important;
    }

Answer 1

我能想到的唯一解决方案是定位 .brick-Children 绝对值。否则 z-index 将不起作用。