CSS Positions not acting as intended - css

Question

I have three text inputs (2 input text, 1 textarea) and a submit button inside a div with position:relative. The 3 text inputs and a submit button all have position:relative as well. The first 2 inputs (q and d) line up as expected, but the last two (t and qS) lie off to the right and don't follow the expected CSS. I would like all of the textboxes and the submit button to line up under each other the same distance from the left side.
Markup:
<form method='POST' action='ask.php'>
<input type='text' id='q' >
<textarea id='d'></textarea>
<input type='text' id='t'>
<input type='submit' value='submit' id='qS'>
</form>
CSS:
#q{
position: relative;
top: 30px;
left: 20px;
width: 400px;
border: 1px solid orange;
font-size: 13px;
}
#d{
position: relative;
top: 60px;
left: 20px;
height: 100px;
width: 400px;
}
#qS{
position: relative;
top: 20px;
left: 20px;
}
#t{
position: relative;
top: 20px;
left: 100px;
}

Answer 1

Your css is quite messy. To get what you want delete all your CSS and replace your HTML with this...
<form method='POST' action='ask.php'>
<p><input type='text' id='q' ></p>
<p><textarea id='d'></textarea></p>
<p><input type='text' id='t'></p>
<p><input type='submit' value='submit' id='qS'></p>
</form>
For further styling and spacing use CSS. There is no need to set anything to position:relative... and there's no need to use top,left,right either. Simply use margin where needed. If you want to move everything together, set margin to your form element.

Answer 2

By default all elements are positioned relative, and hence you don't need to specify it for every element. If you want to add margins, padding add to the divs and it will do the work for you. Here is an example of the code.
http://jsfiddle.net/cdRzW/
Update: The default position is static and not relative, however, the elements are automatically placed in the HTML flow and in this case relative positioning is not required.