|
Título: Problema con atributo z-index Publicado por: Arm144 en 22 Mayo 2017, 21:11 pm 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: <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: 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: .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; } |