Jquery 相对于文本框定位元素

我正在处理这个asp.net mvc 3视图，其中我使用自定义jQuery日历让用户选择搜索日期。问题是我无法按照我想要的方式显示日历。我有CSS的基本知识，但日历是绝对位置的，所以据我所知，我需要一个定位的父元素。所以我决定在下拉列表和文本框中使用table，所有这些都是不同的搜索选项。我试过的一件事是：

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

你知道如何正确显示我的元素吗？另外，我使用table是因为它是我唯一能想到的东西，但我根本不需要使用它。如果有更好的方法，请建议

附言

我不认为这是一个解决方案，但这似乎是目前可行的：

@Html.TextBox（“selDate”、“crmk_зззааааааааа”，新的{@id=dateID，@class=dateID}）

将元素像这样放置在表中，我得到如下结果：

这是在浏览器上为日历呈现的HTML：

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

示例 这里有一个

输入间距 生成日历的Javascript可能引入了一个元素，该元素向下推输入框并导致空格，或者您存在垂直对齐问题：

日历定位 在CSS中，如果使用

position:relative或
位置：绝对然后将根据其最近的
位置对其进行定位

日历的父元素
，应设置为
位置：相对

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

然后，您可以控制日历的位置：

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

请注意：
.jcalendar
只是一个示例类。我不确定您使用的是哪个javascript日历实现，因此请检查您应该针对哪个类名（使用浏览器检查器）。
示例
这里有一个

输入间距
生成日历的Javascript可能引入了一个元素，该元素向下推输入框并导致空格，或者您存在垂直对齐问题：


日历定位
在CSS中，如果使用
position:relative或
位置：绝对然后将根据其最近的
位置对其进行定位

日历的父元素
，应设置为
位置：相对

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

然后，您可以控制日历的位置：

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

请注意：
.jcalendar
只是一个示例类。我不确定您使用的是哪个javascript日历实现，因此请检查您应该针对哪个类名（使用浏览器检查器）。
根据我对保加利亚语的记忆，它看起来像表格数据。所以请保留桌子。Сааааааааааааа。哈哈，拼写很好。但这不是“Саааааааааааааааааааааааа”只是一个做设计师的拙劣尝试。查看我的HTML更新问题。不确定您的语言，但您是否尝试过从我记忆中的保加利亚语，它看起来像表格数据。所以请保留桌子。Сааааааааааааа。哈哈，拼写很好。但这不是“Саааааааааааааааааааааааа”只是一个做设计师的拙劣尝试。查看我的HTML更新问题。不确定您的语言，但您是否尝试过此方法
.parent { position: relative; }

.jcalendar {
  top: 10px;
  left: 0;
}