Z-indexが画像とbackground-divで期待どおりに機能しない

Question

画像がありますが、画像の左側と下部に灰色のbackground-divが5px表示されるページに影響を与えたいと思います。しかし、何らかの理由で、background-divを画像の後ろに揃えることができません。それは常に上にあります。どうすればこれを修正できますか？

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

Answer 1

追加 position: relative;imgCSSに。

参照： http://www.w3schools.com/cssref/pr_pos_z-index.asp

注：z-indexは、配置された要素（position：absolute、position：relative、またはposition：fixed）でのみ機能します。

Answer 2

ちょうど試して、

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