HTML 标签在使用位置 : relative 时将元素向下推到页面

Question

我有一个带有样式输入框和 <a> 的表单类似于表单提交按钮的标签。我不需要真正的表单按钮，因为我将在此表单上执行 AJAX。

这是标记:

<form action="" method="post">
    <input type="text" id="videoLink" />
    <a href="#" class="formSubmit">Go</a>
</form>
<div class="contentTop"></div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque suscipit nisi at elit elementum vitae condimentum felis aliquam. Aliquam vitae orci quis odio semper rhoncus id ut leo. Nullam laoreet semper tortor, vitae viverra est aliquam eu.</p>
</div>
<div class="contentBottom"></div>

这是应用于相关标记的样式:

#videoLink {
    background: url('images/inputBackground.png') no-repeat;
    width: 641px;
    height: 29px;
    border: none;
    padding: 5px 10px 5px 10px;
    font-size: 1.2em;
}

.formSubmit {
    display: block;
    text-indent: -9999px;
    background: url('images/formSubmit.png') no-repeat;
    width: 65px;
    height: 30px;
    position: relative;
    top: -35px;
    right: -590px;
    outline: none;
}

.formSubmit:hover {
    background: url('images/formSubmitHover.png') no-repeat;
}

.formSubmit:active {
    background: url('images/formSubmitPressed.png') no-repeat;
}

事情是，我得到了这件事:

http://imgur.com/OUT3v.jpg

而且我不知道一个好的解决方案。我需要按钮标记消失的间隙。当我尝试申请 position: absolute到 .formSubmit元素它将它从窗口的左上角对齐，这将在不同的分辨率下弄乱它。我还尝试使用 position: relative 执行上述操作应用于表单，但它只是做了同样的事情。

感谢任何帮助，谢谢。

Answer 1

它这样做是因为这是它应该做的，position: relative 根据它的当前位置修改它的位置，但它仍然“在”文档的上下文中。您必须使用 position: absolute; 或将 margin 修改为负值，直到获得所需的效果。

作为旁注，您可以使用 javascript 获取输入框相对于文档的位置，以使其位置相同。

position:absolute

http://jsfiddle.net/73MTd/

position:relative

http://jsfiddle.net/YM9SB/