z-index issue

[cybershot]

I thought this would be a simple matter. I have a featured ribbon that I want to sit on the top left of an image. I can’t see the ribbon. If I remove the image, I can see that the ribbon is sitting right where I need it to it’s just under the image. I have positioning on the ribbon for the z-index, what is missing?

http://jsfiddle.net/pWJe6/6/

[joshuanhibbert]

So currently you have the featured span as the direct parent of the image. The problem being that a parent can never sit in front of a child (the parent is what contains the child). You would be best using a sibling element, like this: http://jsfiddle.net/joshnh/9G5Df/

[joshuanhibbert]

No worries. I do stuff like that all the time :p

[Historical Forums User]

Hi guys,

I’ve extended this ever so slightly. Instead of employing an empty SPAN, I’ve added in the word ‘featured’ and used the newer version image replacement technique to hide the text. So now you can aid your SEO (slightly) at the same time by having tasty text in your HTML code.

http://jsfiddle.net/9G5Df/12/

Updated image replacement technique at:

http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/

[Author]

Posts