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


somehow find wierd , couldn't solve myself.

i have form large outset box-shadow overlaps top inner (inset) box-shadow of parent container. need have parent's black inset shadow visible.

see fiddle

z-index 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 child's prior?

you can't make parent shadow visible shadow same element z-index not work, can use :pseudo , add shadow 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; } 

Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -