how to set a control to be always on top - asp.net

Question

There are two div in the screenshot. the one with calendar in it, is in behind the calendar. but second div contains the control that are on top of the calendar.
there are also two css file. one is bootstrap v3 css file and the other one is attached here.
I'm using a control to pick date from calendar
this is script manager of the control:
<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>
and this is validator of the control:
<pdc:PersianDateValidator ForeColor="Red" ID="PersianDateValidator3" runat="server" ControlToValidate="FinishDateTextBox" Display="Dynamic" ErrorMessage="Invalid Date" Text="*"></pdc:PersianDateValidator>
and this is field of date:
<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>
the problem is calendar goes behind other controls. I took a screenshot so you can see.
and finally here is the css file of the control.
.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;
}
Thank you Very much.

Answer 1

use the z-index. assuming that the .pickerCalendarCSS class is the one you want to be on top, change to this:
.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;
}
the z-index is relative, does not matter if it's value is 10 or 10000, just what the values of other elements are in relation.