显示父母以上的儿童div

Question

这是我的工作jsfiddle

http://jsfiddle.net/wNUyk/

这是html

<div class="productslist">
    <div class="products" id="1">

    </div>
    <div class="productinfo" id="1">
        <div class="productdesc" id="1"></div>
        <div class="productimg" id="1"></div>
    </div>
</div>

和css

.productslist{
position: relative;
-moz-box-shadow:    inset 0 0 9px rgba(0,0,0,.44);
-webkit-box-shadow: inset 0 0 9px rgba(0,0,0,.44);
box-shadow:         inset 0 0 9px rgba(0,0,0,.44);
background: gray;
z-index: 1;
}
.productinfo{
position: relative;
width: 790px;
background-color: rgb(202,114,24);
display: block;
z-index: -1;
}

我需要在productlist div中显示productinfo div，换句话说，我需要在productinfo上方显示插入阴影。

我在两个元素上上下移动z-index但没有成功。 非常感谢任何帮助。