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?


Source: css3

Leave a Reply