z index - Prevent box shadow from showing on top of another element -

z index - Prevent box shadow from showing on top of another element -

i have been trying create section , article appears article sitting on top of section using box shadows. problem blur of section spreading onto article (when want box shadow of article spreading onto section). i've been trying utilize z-index position article higher section i've seen working in many other answered questions nil seems working , can't life of me, figure out why. avoid white box shadow method because more effect within article method works great. here jsfiddle play around with. help much obliged. thanks.

basic html setup:

<article>article<br />article<br />article<br />article<br />i dont want box shadow of section overlapping box here \/</article> <section>section<br />section<br />section<br />section<br />section<br />section<br />section<br />section<br />section</section>

css:

article { position: relative; z-index: 0; width: 600px; margin: 100px auto 0; padding: 20px; border: orange 1px solid; box-shadow: 0 0 100px 1px orange; } section { position: relative; z-index: -1; width: 400px; margin: 0 auto; padding: 20px; border: orange 1px solid; box-shadow: 0 0 100px 1px orange; border-top: none; }

demo

z-index's have effect on positioned elements. give article , section position position: relative.

you still see box-shadow through article thought because it's background transparent. give article background colour background: #fff

article { width: 600px; border: orange 1px solid; box-shadow: 0 0 100px 1px orange; padding: 20px; margin: 100px auto 0; z-index: 0; position: relative; background: #fff; } section { width: 400px; border: orange 1px solid; box-shadow: 0 0 100px 1px orange; border-top: none; padding: 20px; margin: 0 auto; z-index: -1; position: relative; }

z-index css3