Problema con atributo z-index

[Arm144]

Buenas, estaba creando una validación de errores cuando me he topado con el problema de que al mostrar un div como de error, me empuja hacia abajo los elementos del formulario, cuando me gustaría que este por encima de ellos, he utilizado el atributo z-index en el css pero no se realiza. Si alguien fuese tan amable de explicarme o decirme como solucionarlo, estaría encantado.
Muestro acá los códigos js,html y css:

HTML:

Código [Seleccionar] Expandir


<tr>
<td>Contraseña:</td>
<td>
<input type='password' name='pwdIn' id='pwdIn' placeholder='Introduzca su contraseña'>
<div id="errorPwd" class="errorPass">
<h4>La contraseña debería cumplir los siguientes requisitos:</h4>
<ul>
<li id="largo" class="invalid">Debe tener almenos <strong>8</strong> caracteres.</li>
<li id="mayuscula" class="invalid">Debe contener almenos <strong>1 letra mayúscula</strong>.</li>
<li id="minuscula" class="invalid">Debe contener almenos <strong>1 letra minúscula</strong>.</li>
<li id="numero" class="invalid">Debe contener almenos <strong>1 número</strong>.</li>
</ul>
</div>
</td>
</tr>


JS:

Código [Seleccionar] Expandir


function validarPwd(){
var valido;
if(!contraseña.val().match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,}/g)){
valido=false;
}else{
valido=true;
}
return valido;
}
contraseña.focusin(function(){
contraseña.attr('style', 'background:#87CEEB');
});
contraseña.keyup(function(){
var pwd = contraseña.val();
        //validate the length
        if ( pwd.length < 8 ) {
            $('#largo').removeClass('valid').addClass('invalid');
        } else {
            $('#largo').removeClass('invalid').addClass('valid');
        }

        //validate letter
        if ( pwd.match(/[a-z]/) ) {
            $('#minuscula').removeClass('invalid').addClass('valid');
        } else {
            $('#minuscula').removeClass('valid').addClass('invalid');
        }

        //validate capital letter
        if ( pwd.match(/[A-Z]/) ) {
            $('#mayuscula').removeClass('invalid').addClass('valid');
        } else {
            $('#mayuscula').removeClass('valid').addClass('invalid');
        }

        //validate number
        if ( pwd.match(/\d/) ) {
            $('#numero').removeClass('invalid').addClass('valid');
        } else {
            $('#numero').removeClass('valid').addClass('invalid');
        }
$('#errorPwd').slideDown();
}).blur(function() {
if(validarPwd()===false){
contraseña.attr('style', 'border:3px solid #FF4A4A');
$('#errorPwd').show();
}else{
contraseña.attr('style', 'background:#E4FAD3');
$('#errorPwd').hide();
}
});


CSS:

Código [Seleccionar] Expandir


.errorPass{
display: none;
width: 350px;
background: #000000;
border-radius: 5px;
color: white;
z-index: 1;
}
.invalid {
background:url(../imagenes/cancel.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#ec3f41;
}

.valid {
background-image:url(../imagenes/accept.png) no-repeat 0 50%;
padding-left:22px;
line-height:24px;
color:#3a7d34;
}