How to make the shadow of the upper block hang over the second? I thought that z-index would help, but alas.

<div style="pozition: relative;z-index: 2;height: 30px; width: 30px; border: solid 1px black;box-shadow: 0 10px 6px -6px #777;"></div> <div style="pozition: relative;background-color: red;z-index: 1;height: 30px; width: 30px; border: solid 1px black;"></div>

Closed due to the fact that it was off topic by aleksandr barakin , user194374, zRrr , VenZell , fori1ton Mar 10 '16 at 8:32 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • "The question is caused by a problem that is no longer reproduced or typed . Although similar questions may be relevant on this site, solving this question is unlikely to help future visitors. You can usually avoid similar questions by writing and researching a minimum program to reproduce the problem before publishing the question. " - aleksandr barakin, Community Spirit, zRrr, VenZell, fori1ton
If the question can be reformulated according to the rules set out in the certificate , edit it .

    1 answer 1

    you have an error pozition - position is necessary

     *{ box-sizing: border-box; } div{ height: 100px; width: 100px; border: solid 1px black; margin: 0 auto; position: relative; padding: 15px; } div:nth-of-type(1) { z-index: 1; background-color: #fff; box-shadow: 0 20px 14px -14px #777; } div:nth-of-type(2) { background-color: red; } 
     <div></div> <div></div>