Z-index无法正常工作使用picture和background-div

Question

我有一张图片，我希望在我的页面上产生一个效果，其中在图片的左侧和底部显示5px灰色背景div。但由于某种原因，我不能让background-div在图片后面对齐。它始终位于顶部。我该如何解决这个问题？

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

Answer 1

将position: relative;添加到img CSS。

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

  

注意：z-index仅适用于定位元素（位置：绝对值，   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;
}