Переместить div ниже текущей текстовой области (jquery)

Question

У меня есть форма с несколькими текстовыми областями. В качестве средства редактирования список div заполняется через ajax с предложениями, основанными на текущем вводе и активной текстовой области.

Но дело в том, что мне нужно переместить этот div ниже активной текстовой области.

У меня есть текущий идентификатор текстовой области, но я не могу найти способ перемещения элемента именно таким образом.

<div id="list"></div>

            <dt><label for="mazas">Mazas:</label>

            <dd><textarea name="mazas" id="mazas" rows="1" cols="150"></textarea></dd>

            <dt><label for="rayos">Rayos:</label>

            <dd><textarea name="rayos" id="rayos" rows="1" cols="150"></textarea></dd>

            <dt><label for="llantas">Llantas:</label>

            <dd><textarea name="llantas" id="llantas" rows="1" cols="150"></textarea></dd>

            <dt><label for="cubiertas">Cubiertas:</label>

            <dd><textarea name="cubiertas" id="cubiertas" rows="1" cols="150"></textarea></dd>

Answer 1

Чтобы переместить его после текстовой области с идентификатором mazas, например:

$("#list").detach().insertAfter($("#mazas"));

Answer 2

Установите для div значение:

• позиция: абсолютная
• z-index: 10 ( скажем )
• верх: 0
• левый: 0

... затем позиционируйте, используя (например):

$('#list').css('left', $('#mazas').offSet().left + 'px')
$('#list').css('top', $('#mazas').offSet().top + $('#mazas').height() + 5 + 'px')

... тогда он окажется в хорошем положении, и перед всем остальным, чтобы не сломать остальную часть страницы. используйте fadeIn(), чтобы сделать его действительно забавным. ( Вам может понадобиться использовать parseInt для строк, BTW )

Я использую это все время ...