Как я могу складывать div с тенью коробок поверх другого div с свойством box-shadow

Question

Мне нужно складывать два div сверху друг друга. Но когда я пытаюсь это сделать, их тени объединяются вместе под форму прямоугольной формы.

.wrap-header { 
min-height: 94px; 
overflow: hidden; 
-webkit-box-shadow: 0px 0px 7px 3px #bfbfbf; 
box-shadow: 0px 0px 7px 3px #bfbfbf; 
} 

aside { 
float: right; 
height: 700px; 
-webkit-box-shadow: 0px 0px 7px 4px #bfbfbf; 
box-shadow: 0px 0px 7px 4px #bfbfbf; 
width: 25%; 
} 

Answer 1

Что-то вроде этого, вот Fiddle

.wrap-header { 
    background: #fff; 
    position: relative; 
    min-height: 94px; 
    overflow: hidden; 
    z-index: 1; 
    box-shadow: 0px 0px 7px 3px #bfbfbf; 
    -moz-box-shadow: 0px 0px 7px 3px #bfbfbf; 
    -webkit-box-shadow: 0px 0px 7px 3px #bfbfbf; 
} 

aside { 
    background: #fff; 
    position: relative; 
    float: right; 
    height: 700px; 
    width: 25%; 
    z-index: 100; 
    box-shadow: 0 8px 6px 3px #bfbfbf; 
    -moz-box-shadow: 0 8px 6px 3px #bfbfbf; 
    -webkit-box-shadow: 0 8px 6px 3px #bfbfbf; 
}