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

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

我在两个元素上上下移动了 z-index，但没有成功。任何帮助是极大的赞赏。