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!

[juangemelo01]

¿que tipo de input es?
creo que te falta algo amigo
<input class="interior" value="9" type="tipo">

nunca eh visto que un input se cierre asi, se cierra en automatico

prueba amigo y me comentas

por cierto ¿que estabas intentando hacer?

[warywin]

Me siguió sin funcionar, estaba haciendo un sudoku Javascript, ocultando aquellos inputs que contenian el numero resuelto y el segundo input era para escribir el numero que creia el usuario, luego ya con DOM comparas ambos valores, pero no me salió xD

[pzin]

No puedes meter un input dentro de otro. Son elementos sin contenido.

[juangemelo01]

los input se cierran por si solos
esta etiqueta la tienes de mas

Código:

</input>

con el type, defines que tipo de input es (text, submit, etc.)
para que un input no pueda ser editable necesitas el estado 'disabled = true'
ejemplo

Código:

<input type="text" name="Casilla9" disabled="true" value="5" size="1">