Input sobre Input como mostrar valores

[warywin]

Hola, no veo la forma de mostrar un input "interior" (es decir q esta dentro de otro) por encima del de arriba suyo, es decir mejor:

Código HTML:

<td>
<input  class="exterior" value="7" >
    <input class="interior" value="9">
</input>
</td>
 

esto es lo que hago en css mostrandose en cuadraditos blancos pequeños:

Código CSS:

.exterior{
        width: 35px;
        height: 35px;
        text-align: center;
        border: 1px black solid;
        background-color: transparent;
                z-index:-99999;
        color:black;
        font-weight: bold;
        font-size: 25px;
        box-shadow: inset 2px 2px 5px black;
    }
    .interior{!important
        width: 35px;
        height: 35px;
        text-align: center;
        border: 1px black solid;
        background-color: #fff;
        z-index: 99999;
        color:black;
        font-weight: bold;
        font-size: 25px;
        box-shadow: inset 2px 2px 5px black;
    }
 

como podeis observar en el css intento que el interior sobresalga y se vea por encima del exterior pero esto no ocurre es decir lo que quiero esque el valor 9(interior) se vea y tape al valor 7(exterior) nose si me entendeis.
Un saludo!