Fancybox，Jquery Validate＆position：绝对

Question

我有一个fancybox http://fancybox.net它包含一个表单。

在窗体我运行jQuery的验证插件：绝对和顶部余量：http://docs.jquery.com/Plugins/Validation/Validator

错误消息被直接使用位置的输入的正下方。

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; 
} 

这一切都只是当我产生错误消息我第二次启动弹出工作的伟大，（即：具有复位后的形式）。这些消息表明30PX下：

任何想法，为什么位置被重新计算？我正在使用FF14，但同样的问题出现在Chrome上。任何帮助感谢！

Answer 1

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

你可以做两件事情：

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