相对于文本框定位元素

Question

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

@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>元素中，然后我就明白了：

这几乎是我想要的，但知道你可以看到文本框略低于其他元素。如果我从<img>标记中删除边距，则文本框会重新到位，但日历图像会丢失正确的位置。

以下是日历的CSS：

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

如何正确显示我的元素？另外，我正在使用桌子，因为这是我唯一能想到的东西，但根本不需要使用它。如果有更好的方法，请提出建议。

P.S

我不认为这是一个解决方案，但这似乎现在有用了：

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

Answer 1

实施例

这是 similar example

输入间距

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

日历定位

在CSS中，如果使用position: relative;或position: absolute;定位对象，则会根据其最接近的position父级对象进行定位。

您的日历的父元素<td>应设为position: relative;

.parent { position: relative; }

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

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

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