Z-index 无法按预期使用图片和背景 div答案

【问题标题】：Z-index not working as expected working with picture and background-divZ-index 无法按预期使用图片和背景 div
【发布时间】：2011-11-15 21:05:05
【问题描述】：

我有一张图片，我想在我的页面上添加一个效果，在图片的左侧和底部显示一个灰色的背景 div 5 像素。但由于某种原因，我无法让 background-div 在图片后面对齐。它总是在上面。我该如何解决这个问题？

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

【问题讨论】：

标签： html css z-index

【解决方案1】：

将position: relative; 添加到img CSS。

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

注意：z-index 仅适用于定位元素（位置：绝对，位置：相对，或位置：固定）。

【讨论】：

那行得通。谢谢。另外，我发现这比发布的其他答案更漂亮。现在我的 z-indexes 被正确读取了。
查看我添加的参考，z-index 仅在给定position 时有效。这就是 img 标签 z-index 不起作用的原因。
啊，好吧。我坐在父级上的相对位置，我认为这就足够了。谢谢参考，我去看看！

【解决方案2】：

试试看，

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

【讨论】：

废话......这很容易。在所有浏览器中工作。谢谢。但这背后的逻辑是什么？我图片的 z-index 高于背景。没有意义。总之，结案了。非常感谢。
查看我的答案以了解解决此问题的正确方法。 img 标签 z-index 被丢弃，因为没有给出 position。通过将.grays z-index 设置为负数也可以，因为灰色确实指定了position，并且在这将.gray 放在img 后面。