html - 背景元素上的 z-index 图像

Question

回到基础，我有一个情况，我有一个图像需要出现在它下面的元素的背景上。但是，我不希望图像超过该元素的内容，只希望元素(和背景属性)本身:

http://jsfiddle.net/chricholson/4twr5/1/

HTML:

<img src="https://www.google.com/images/srpr/logo3w.png" />

<div>
    <a href="#">Hello World</a>
</div>
​

CSS:

img { position: absolute; z-index: 20; }

div { position: relative; top: 45px; z-index: 10; padding: 30px; background: red; }

a { position: relative; z-index: 30; padding: 10px; background: yellow; display: block; }

预期的行为是图像出现在 div 背景的顶部 [check]，但随后出现在黄色链接后面，但事实并非如此。

Answer 1

在这里 Can't get z-index to work for div inside of another div 找到了我的“答案”(更加证实了我的疑问)。关键句子是“一旦你在 test_1 上设置了 position:relative，你就会导致它的 z-index 与 test_2 的 z-index 处于不同的世界。”

看来我遇到问题的原因是因为一旦我将图像设置为高于 div，无论我为 div 的内容设置什么 z-index 值，它总是会被覆盖。我不认为 z-indexes 是这样工作的，我认为一切都是“独立的”，只要一个值高于其他地方的值(不管父容器)，一切都会好起来的。