如何将控件设置为始终位于顶部

Question

截图中有两个 div。里面有日历的，在日历的后面。但第二个 div 包含日历顶部的控件。 还有两个css文件。一个是 bootstrap v3 css 文件，另一个附在此处。 我正在使用控件从日历中选择日期 这是控件的脚本管理器：

<pdc:PersianDateScriptManager ID="PersianDateScriptManager" runat="server" CalendarCSS="PickerCalendarCSS"
        CalendarDayWidth="50" FooterCSS="PickerFooterCSS" ForbidenCSS="PickerForbidenCSS"
        ForbidenDates="" ForbidenWeekDays="" FrameCSS="PickerCSS"
        HeaderCSS="PickerHeaderCSS" SelectedCSS="PickerSelectedCSS" WeekDayCSS="PickerWeekDayCSS"
        WorkDayCSS="PickerWorkDayCSS">
</pdc:PersianDateScriptManager>

这是控件的验证器：

<pdc:PersianDateValidator ForeColor="Red" ID="PersianDateValidator3" runat="server" ControlToValidate="FinishDateTextBox" Display="Dynamic" ErrorMessage="Invalid Date" Text="*"></pdc:PersianDateValidator>

这是日期字段：

<pdc:PersianDateTextBox CssClass="form-control text-left input-sm" Width="160" ID="FinishDateTextBox"  runat="server" DefaultDate="1392/01/01" IconUrl="~/Images/Design/Calendar.gif" SetDefaultDateOnEvent="OnDoubleClick"></pdc:PersianDateTextBox>

问题是日历落后于其他控件。我截图了，你可以看看。

最后是控件的css文件。

.PickerCSS
{
    background-color: #ffffff;
    border-right: #000000 2px solid;
    border-top: #000000 2px solid;
    border-left: #000000 2px solid;
    border-bottom: #000000 2px solid;
}
.PickerHeaderCSS
{
    background-color: lightgrey;
    height: 30px;
}
.PickerFooterCSS
{
    background-color: lightgrey;
}
.PickerWeekDayCSS
{
    background-color: lightgrey;
    text-align: center;
    font-size: 8pt;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
    height: 19px;
}
.PickerCalendarCSS
{
    background-color: #e8f4ff;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
    height: 19px;
}
.PickerWorkDayCSS
{
    background-color: #ffffff;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
}
A.PickerWorkDayCSS
{
    color: black;
    text-decoration: none;
    border: none;
}
.PickerForbidenCSS
{
    background-color: #e8f4ff;
    color: Red;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
    font-weight: bold;
}
.PickerSelectedCSS
{
    background-color: #e4e8ff;
    border-right: black 1px solid;
    border-top: black 1px solid;
    border-left: black 1px solid;
    border-bottom: black 1px solid;
}
A.PickerSelectedCSS
{
    font-weight: bold;
    color: #0066ff;
    text-decoration: underline;
    border: none;
}

非常感谢。

Answer 1

使用 z-index。假设 .pickerCalendarCSS 类是您想要的，请更改为：

.PickerCalendarCSS
{
  background-color: #e8f4ff;
  border-right: black 1px solid;
  border-top: black 1px solid;
  border-left: black 1px solid;
  border-bottom: black 1px solid;
  height: 19px;
  z-index:10;
}

z-index 是相对的，它的值是 10 还是 10000 无关紧要，只是其他元素的值是相关的。