Orden de los elementos del índice z en bxslider

Necesito ordenar los contenidos de un bxslider con un elemento no-child. entre la imagen y el texto en la parte superior.

p.ej

<div>
<ul id="slider">
<li><img src="image1.jpg" /><span>text</span></li>
</ul>
<div class="under-text-over-image"></div>
</div>

¿Alguien podría aconsejar sobre el índice z?

mi css existente es similar a:

li img{
position:relative;
z-index:1;
}
li span{
position:relative;
z-index:3;
}
.under-text-over-image{
position:relative;
z-index:2;
}

Gracias

Respuestas a la pregunta(3)

Su respuesta a la pregunta