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
Post a Comment