HTML <a> tag is pushing elements down the page when using position: relative

Question

Hello all.

I have a form with a style input box and a <a> tag that acts like the form submit button. I don't want a real form button because I will be performing AJAX on this form.

Here's the markup:

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

And this is the style applied to the relevant markup:

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

The thing is, I get this happening:

http://imgur.com/OUT3v.jpg

And I don't know a good solution. I need that gap where the buttons markup is to go away. When I tried to apply position: absolute to the .formSubmit element it aligns it from the top left of the window which will mess it up in different resolutions. I also tried doing the above with position: relative applied to the form but it just did the same.

Any help is appreciated, thanks.

Answer 1

It's doing that because that's what it's supposed to do, position: relative modifies it's position based on it's current location, but it's still "in" that context of the document. You will have to use position: absolute; or modify the margin to negative values until you get the desired affect.

As a side note you can use javascript to get the position of your input box relative to the document, so that it positions the same.

Position: Absolute

http://jsfiddle.net/73MTd/

Position: Relative

http://jsfiddle.net/YM9SB/

Answer 2

Nevermind, managed to fix it myself.

I put another DIV about my form called aligner and then set that to position: relative and then I was able to use position: absolute properly on the <a> element.

Thanks all.

Answer 3

Just to document another solution: you don't need to use absolute or relative positioning to achieve what you want. "display: block" and a negative margin-top on the anchor will solve your problem. Here's a third solution based on Robert's examples:

Top Margin: http://jsfiddle.net/xf2U4/