Child element's box-shadow superior to parent's?

Somehow I find this wierd and I couldn't solve it myself.

I have form with large outset box-shadow which overlaps top inner (inset) box-shadow of the parent container. I need to have parent's black inset shadow to be visible.

See this fiddle

z-index does nothing.

My CSS:

#description {
    display: block;
    overflow: hidden;
    box-shadow: inset 0px 17px 11px -15px #000;
    padding-top: 10px!important;
    }
.upload {
    float: left;
    width: 696px;
    margin-top: 1em;
    border: 1px solid #546E7A;
    font-family:"Roboto", sans-serif;
    background-color: #fff;
    box-shadow: 0px -17px 0px 20px #546E7A;
    }

How come the child's prior?

Solution

You can't make the parent shadow visible as shadow is for the same element so the z-index will not work, but you can use :pseudo and add a shadow to it

demo - http://jsfiddle.net/ccspw1dh/3/

#description:before {
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    left:0;
    top:0;
    box-shadow: inset 0px 17px 11px -15px #000;
}