Z-index работает не так, как ожидалось, с изображением и фоном-div

У меня есть изображение, и я хотел бы иметь эффект на моей странице, где фон-div с серым цветом отображается 5px с левой стороны и снизу изображения. Но по какой-то причине я не могу заставить background-div выравниваться позади изображения. Он всегда лежит на столе. Как я могу это исправить?

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

Ответ 1

Добавьте position: relative; в CSS img.

Смотрите: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Примечание: z-индекс работает только с позиционированными элементами (позиция: абсолютная, позиция: относительная или позиция: фиксированная).

Ответ 2

попробуйте,

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