Fancybox, Jquery Validate & position:absolute

Question

我有一个花式框http://fancybox.net，其中包含一个表单。

在我运行 jQuery 验证插件的表单上：http://docs.jquery.com/Plugins/Validation/Validator

使用 position:absolute 和上边距将错误消息直接定位在输入下方。

var validator = $("#contact-us").validate({
        messages: {
            name: "Please enter your name",
            phone: "Please enter your phone number",
            email: "Please enter a valid e-mail address"
        }
    });

// Launch lightbox

$(".launch-form").fancybox({
    'speedIn'           :   500,
    'speedOut'          :   300,
    'overlayOpacity'    :   0.9,
    'overlayColor'      :   '#000',
    onComplete          :   function() {$('#cta-name').focus();},
    onCleanup           :   function() {validator.resetForm();}

});

label.error {
    background-color: #ae4136;
    color: #FFFFFF;
    font-size: 10px;
    margin-top: 30px;
    padding: 1px 5px 2px 5px;
    position: absolute;
    right: 21px;
    line-height:1.2;
    height:12px;
}

一切都很好，除了当我第二次启动弹出窗口时生成错误消息（即：重置表单后）。消息显示低 30 像素：

关于为什么重新计算职位的任何想法？我正在使用 FF14，但同样的问题出现在 chrome 上。任何帮助表示赞赏！

Answer 1

您尚未发布您的 HTML 标记，但 absolute 的定位是相对于其最近的已应用 position: <anything other than static, eg. relative or absolute> 的父元素而言的。

你可以做两件事：

1. 不要使用定位，只使用block 元素和margin
2. 将每个标签和字段包装在其自己的包含元素中，例如div 或fieldset