CSS позиции не действуют как задумано

Question

У меня есть три ввода текста (2 ввода текста, 1 textarea) и кнопка отправки внутри div с позицией: относительный. 3 текстовых ввода и кнопка отправки имеют положение: относительное. Первые 2 входа (q и d) выстраиваются в соответствии с ожиданиями, но последние два (t и qS) лежат справа и не следуют ожидаемому CSS. Мне бы хотелось, чтобы все текстовые поля и кнопка отправки располагались друг под другом на одинаковом расстоянии от левой стороны.

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

Ваш 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>    

Для дальнейшей стилизации и разметки используйте CSS. Нет необходимости устанавливать что-либо для позиции: относительный ... и нет необходимости использовать верхнюю, левую и правую стороны. Просто используйте поле, где это необходимо. Если вы хотите переместить все вместе, установите поле для вашего элемента формы.

Answer 2

По умолчанию все элементы расположены относительно, и, следовательно, вам не нужно указывать его для каждого элемента. Если вы хотите добавить поля, добавьте padding в div, и он сделает всю работу за вас. Вот пример кода. http://jsfiddle.net/cdRzW/

Обновление : позиция по умолчанию статическая и не относительная, однако элементы автоматически помещаются в поток HTML, и в этом случае относительное позиционирование не требуется.