Почему индекс z -:-1; появляются над z -индекс :1;?

Объясните это поведение:

div {
   position: relative;
   background: red;
   width: 100px;
   height: 100px;    
}

div:before {
    position: absolute;
    background: blue;
    width: 100px;
    height: 100px;  
    z-index: -1;
    content: "";
    left: -5px;
    top: -5px;
}

http://jsfiddle.net/2VexH/2/

Единственное отличие состоит в том, что первый div имеет z -index :1 набор.