在提交表单span消息更改位置的原因

我试图理解为什么每次字段变空时jquery生成的消息都会改变位置！

因此，如果消息是由ajax的反馈生成的，那么它就会被放置在登录框正下方的适当位置。如果提交时字段（输入框）为空，则不会调用ajax脚本，并且空字段的消息显示在正上方，但下方为40px或更多。

jquery脚本：

<script type="text/javascript">
                        <!--
                        $(document).ready(function(){
                            $("#loginform").submit(function(){
                                $('#loginform input[type=text]').each(function(n,element){  
                                    if ($(element).val()=='') {
                                        $(".message").html('<p>O campo '+element.id+' tem de ter um valor!</p>').fadeIn("slow").delay(2000).fadeOut(1000);
                                        return false;  
                                    } 
                                    else{
                                        $.post("login.php", { usrname:$("#Nome").val(), passwd:$("#Palavra-passe").val()}, function(data){
                                            if(data == '1'){
                                                $("#subLog").hide();
                                                $(".message").html('<p>Login efectuado com sucesso, a redirecionar...</p>').fadeIn("slow").delay(2000).fadeOut(1000, function (){
                                                    $("#login").fadeOut('slow', function(){
                                                        location.reload();
                                                    });
                                                });
                                            }
                                            else{
                                                $("#subLog").hide();
                                                $(".message").html('<p>Erro! Tente novamente por-favor!</p>').fadeIn("slow").delay(1500).fadeOut(1000, function(){
                                                    $("#subLog").fadeIn('fast');
                                                });
                                            }
                                        });
                                    }
                                });
                                return false;
                            });
                        });
                        //-->
                        </script>

css消息样式：

.message{
    text-align:center;
    color: white;
    background: rgba(0, 0, 0, .5);
    margin-top: 65px;
    padding: 4px;
    font-weight: bold;
    font-size: small;
    border: 2px solid white;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    border-radius: 6px;
}

形式：

<div class="box" id="login" style="width: 326px; height: 228px; top: 39%; background-image: url('images/loginBox.png');background-repeat: no-repeat;">
<form id="loginform" action="" method="post">
    <fieldset style="display: block">
        <legend></legend>
            <input id="Nome" class="transparent" type="text">
        <input id="Palavra-passe" class="transparent" type="password"> 
        <input id="subLog" type="submit" value="Login">
    </fieldset>
</form>
<div class="message"></div>

更新：

当调用ajax指令时，提交按钮被隐藏，因此位置更改为65px。为了纠正这个小问题，我从css规则中删除了margin-top属性，并用.css（'margin-top'，'value'）更改了位置。通过这种方式，我将值更改为不同的消息，并且两者都显示在同一屏幕位置。非常感谢。