Hola
He hecho algunos ajustes y pruebas con tu código, sin variarlo mucho y lo que saco en conclusión hasta ahora son dos cosas.
1. Si los vínculos mantienen su estado de elemento inline, su fondo estará, junto con ellos, en el z-index que les asiges y tanto el texto del vínculo como su fondo, estarán por encima del 31.
2. Los elementos con display block, apilan sus fondos, de manera que el fondo de la capa de los enlaces estará encima de la capa del 31 y a su vez, el texto de dichos elementos de bloque estarán apilados a su vez; es decir, es como barajar un mazo de cartas, cae una de cada lado formando una única pila.
No se si había caido antes en esto, pero es lo que ocurre. No he encontrado documentación al respecto, ya sea porque no hay o porque no he buscado bien; sin embargo, parece como si la implementación de este hecho ocurriera al revés; definitivamente ocurre al revés de como uno espera.
Veremos si encuentro algo más.
En cualquier caso, este es el código que estaba usando para las pruebas, obviamente solo tiene la última versión.
Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>capas</title>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<style type="text/css">
#capa_2 {
font-size: 6em;
color: red;
font-weight: bold;
background: #0f0;
}
#capa_3 {
margin-top: -6em;
z-index: 100;
background: #fff;
width: 200px;
display: block;
}
a { background: inherit; display: list-item; }
a:hover {
background-color: #000;
color: #fff;
font-weight: bold;
}
</style>
</head>
<body>
<div id="capa_1">
<div id="capa_2">31</div>
<div id="capa_3">
<a href="">abcdefgh</a>
<a href="">abcdefgh</a>
<a href="">abcdefgh</a>
<a href="">abcdefgh</a>
</div>
</div>
</body>
</html>
Felicidad