Z Index Superposicion de objetos y texto

[marcos_eusebi]

Hola a todos, tengo una pequeña duda con la priopedad Z-Index.

Estoy tratando de hacer que div 1 tenga "Z-Index: 1" div 2 "Z-Index:2" y que el texto dentro de div 1 tenga "Z-Index: 3". Resumiendo, quiero que el texto del div 1 se vea sobre el 2 pero que el 2 este sobre el 1.

Este es el codigo que estoy utilizando:

HTML:

Código HTML:

<div class="div1"></div>
<div class="div2"><span>asd</span></div>
 

CSS:

Código CSS:

.div1 {
    background-image: url(Images/side-top.png);
    height: 148px;
    width: 174px;
    z-index: 2;
    position: relative;
}
.div2 {
    background-image: url(Images/side-mid.jpg);
    height: 288px;
    width: 174px;
    margin-top: -110px;
    z-index: 1;
    position: relative;
}
span {
    color: #FFF;
    text-align: center;
    position: relative;
    z-index: 3;
}
 

Lo que busco es que me expliquen que esta mal en el codigo y como solucionarlo.

Desde ya muchas gracias.
Marcos.