Why is z-index not working even on a positioned element?

I am learning to create pure CSS3 ribbons

I have

.dialog h1 {
    position: relative;
    z-index: 10;
}

.dialog h1:before, .dialog h1:after {
   position: absolute;
   z-index: -10;
}

but my CS开发者_如何学运维S triangles (.dialog h1:before/after) are still shown in front of the h1. why is that?

http://jsfiddle.net/w9Hqd/2/

---

see http://jsfiddle.net/w9Hqd/3/