z-index not working in IE?

I am creating 1 of those CSS3 ribbons

http://www.jsfiddle.net/G4QQ2/

It works in FF & Chrome but in IE, the z-index does not开发者_Go百科 seem to work

Why is that?

@RoToRa's comment is correct

I've experimented a bit with your jsfiddle, and my guess is that IE simply doesn't support z-index in combination with the pseudo-element before. BTW, I'd avoid negative z-index if possible, because older FF don't support it properly

I think a better fix will be from @mercator's comment this post

Not an answer to your question, but a solution to your problem: jsfiddle.net/G4QQ2/7 I.e. Add border-top: 0 to the h1:before and adjust its top to top: 34px. That way you don't need the z-index at all.