jquery - テキストボックスを基準にして要素を配置する

Question

私はカスタムjQueryカレンダーを使用してユーザーが検索の日付を選択できるようにするこのasp.net mvc 3ビューに取り組んでいます。問題は、思い通りにカレンダーを表示できないことです。私は CSS の非常に基本的な知識を持っていますが、カレンダーには絶対位置があるため、配置には親要素が必要であることを理解しています。そこで、ドロップダウンとテキストボックスにテーブルを使用することにしましたが、これらはすべて異なる検索オプションです。私が試したことの1つはこれです：

@using (Html.BeginForm())
{
    var dateID = "jc_dateBefore";
    var calParent = "jcalendar_parentBefore";
    <table>
    <tr>
        <td>
            @Html.DropDownList("kkcId", (SelectList)ViewBag.KKCNames, "Изберете ККС", new { @class = "validateClassKKCType" })
        </td>
        <td>
            @Html.DropDownList("UserId", (SelectList)ViewBag.UserNames, "Изберете Потребител", new { @class = "validateClassKKCType" })   
        </td>
        <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>
        <td>
            @Html.DropDownList("statusId", (SelectList)ViewBag.Status, "Изберете Статус", new { @class = "validateClassKKCType" })
        </td>
        <td>
            <input type="submit" value="Search" />
        </td>
    </tr>
    </table>
}

ここで使用されている他のテクノロジーとは関係なく、純粋な CSS の問題であるとほぼ確信していますが、コード全体を貼り付けます。したがって、カレンダーに固有のコードは次のスニペットです。

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

上記を使用すると、結果として次のようになります。

カレンダーは、ユーザーが選択した場合に実際に日付が表示される場所である左側のテキストボックスの下にある必要がある場合、右側のドロップダウンの下にあります。

スニペットのコードを次のように変更すると:

<td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999"></div>
        </td>

<td>すべてを1つの要素に残すと、次のようになります:

これはほとんど私が望んでいるものですが、テキストボックスが他の要素より少し下にあることがわかります。タグからマージンを削除すると<img>、テキストボックスは元の位置に戻りますが、カレンダーの画像は正しい位置を失います。

カレンダーの CSS は次のとおりです。

.jcalendar_parent{
    z-index: 999;
    position: absolute;
}

要素を正しく表示する方法はありますか? また、私が考えることができる唯一のものであるため、テーブルを使用していますが、まったく使用する必要はありません。より良い方法があれば、それを提案してください。

PS

私はこれを解決策とは考えていませんが、これは今のところうまくいくようです:

 <td>
            @Html.TextBox("selDate", "Изберете Дата", new { @id = dateID, @class = dateID })
            <div id="@calParent" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('@calParent', '@dateID')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>

このようにテーブルに要素を配置すると、次のようになります。

これは、ブラウザでカレンダー用にレンダリングされる HTML です。

<td>
            <input class="jc_dateBefore" id="jc_dateBefore" name="selDate" type="text" value="Изберете Дата" />
            <div id="jcalendar_parentBefore" class="jcalendar_parent" style="z-index: 999;"></div>
        </td>
        <td>
            <img onclick="viewCalendar('jcalendar_parentBefore', 'jc_dateBefore')"  style="margin-top: 5px;" width="20" height="20" src="../../Content/redmond/images/calendar-32x32.png" alt="CAL" border="0"/>
        </td>