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

Question

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?

Answer 1

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

Answer 2

z-index will not help because .upload is a child of #description and its display will always have more priority than #description.

It is like creating a div with background black inside a div with background white. All you will see is black. Your box-shadow on the parent is still there but the drawing of the child shadow just totally covers it.

To solve your problem and still see the glow you could just make it smaller in .upload:

box-shadow: 0px -17px 0px 1px #546E7A;

http://jsfiddle.net/ccspw1dh/2/

Furthermore you can chain box-shadows like here:

box-shadow: 0px -17px 0px 1px #546E7A, inset 0px 17px 11px -15px #000;

http://jsfiddle.net/ccspw1dh/4/