背景元素上的 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 another div。关键句子是“一旦你在 test_1 上设置 position:relative，你就会导致它的 z-index 与 test_2 的 z-index 处于不同的世界。”

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