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

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则无关紧要，只是其他元素的值是相关的。