为什么即使在定位元素上z-index也不起作用？

Question

我正在学习创建纯CSS3色带

我有

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

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

但我的CSS三角形（.dialog h1:before/after）仍然显示在h1的前面。那是为什么？

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

Answer 1

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