z-index image over backgrounds element

Question

Back to basics, I have a situation whereby I have an image which needs to appear over the background of an element just below it. However, I do not want the image to be over the top of the content of that element, only the element (and background properties) itself:

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; }

Expected behaviour would be the image to appear over the top of the div background [check], but then appear behind the yellow link, which it isn't.

Answer 1

Found my "answer" (more confirming my doubts) here Can't get z-index to work for div inside of another div. The key sentence being "Once you set position:relative on test_1 you are causing its z-index to be in a different world than the z-index of test_2."

It seems the reason I have a problem is because once I have set the image higher than the div, no matter what z-index value I set to the contents of the div it will always be covered. I didn't think z-indexes worked like this, I thought everything was "separate" and so long as a value was higher than a value elsewhere (regardless of parent containers) things would be fine.