Z-index not working as expected working with picture and background-div

Question

I have a image, and I'd like to have an effect on my page where a background-div with gray color is displayed 5px on the left side and bottom of the picture. But for some reason, I can't get the background-div to align behind the picture. It always lays ontop. How can I fix this?

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

Answer 1

Add position: relative; into the img CSS.

See: http://www.w3schools.com/cssref/pr_pos_z-index.asp

Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Answer 2

just try,

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