CSSの位置が意図したとおりに動作しない

Question

3つのテキスト入力（2つの入力テキスト、1つのテキストエリア）と、position：relativeのdiv内に送信ボタンがあります。 3つのテキスト入力と提出ボタンはすべて相対的な位置も持っています。最初の2つの入力（qとd）は予想通りに並んでいますが、最後の2つ（tとqS）は右側にあり、期待されるCSSに従いません。私は、テキストボックスと送信ボタンのすべてを左下から同じ距離にお互いに整列させたいと思います。

マークアップ：

<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

あなたのCSSは非常に厄介です。さらにスタイリングと間隔の使用CSSのために...あなたはすべてのあなたのCSSを削除し、これを使用してHTMLを置き換えたいもの

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

を取得します。ポジションを設定する必要はありません。相対的なものです。上、左、右どちらも使用する必要はありません。必要に応じてマージンを使用するだけです。すべてを一緒に移動する場合は、フォーム要素に余白を設定します。

Answer 2

デフォルトでは、すべての要素は相対的な位置に配置されているため、すべての要素にその要素を指定する必要はありません。マージンを追加したい場合は、divにパディングを追加すると、作業ができます。次に、コードの例を示します。 http://jsfiddle.net/cdRzW/

更新：デフォルト位置は相対静的ではない、しかし、要素が自動的にHTML流に配置され、この場合には相対的な位置決めが必要とされません。