Z-index non funziona come previsto lavorando con picture e background-div

Ho un’immagine, e mi piacerebbe avere un effetto sulla mia pagina dove viene visualizzato un div in background con un colore grigio 5px sul lato sinistro e inferiore dell’immagine. Ma per qualche ragione, non riesco a far sì che il background-div si allinei dietro l’immagine. Rimane sempre ontop. Come posso risolvere questo?

Jsfiddle: http://jsfiddle.net/3Z7m4/2/

prova,

 .container .gray { width: 420px; height: 315px; position: absolute; margin-left: 5px; margin-top: -315px; z-index: -10; background-color: gray; }