Hola,
hmm, aquí hay una muy buena explicación de porque no obtienes el resultado que esperas: css-discuss.incutio.com/?page=OverlappingAndZIndex.
Básicamente, es el contexto, en inglés: stacking context. Como tienes un div posicionado absolutamente dentro de otro, cada uno tiene contexto diferente y el z-index sólo afecta a los elementos que estan en un mismo contexto.
Una posible solución sería que manejaras otra capa a manera de contenedor para que los divs posicionados estuvieran en el mismo contexto, por ejemplo:
Código PHP:
<div id="container">
<DIV id="black" STYLE="position:absolute; font-size:100px;
font-family:impact; top:15px; left:10px;
color:black; z-index:5">
HTML
</DIV>
<DIV id="gray" STYLE="position:absolute; font-size:100px;
font-family:impact; top:19px; left:15px;
color:gray; z-index:0">
HTML
</DIV>
</div>
Otra solución es usar un z-index
negativo para la capa gris con la ventaja de que no hay que hacer cambios en la estructura del documento. (Aunque yo preferiría controlar mis contextos...)
Saludos.