我的asp.net网站上有两个javascript日期选择器:
当我点击日期选择器时,它看起来像这样:
如您所见,日历弹出窗口显示在屏幕上的下一组字段后面。
我的问题是,我该怎么做才能让这个控件出现在屏幕上的字段前面(或者更确切地说)?
编辑: 以下是此特定日期选择器的代码:
<td rowspan="2" style="background-color: #A5C2FA; padding-left: 1px; text-align: center;">
<a onclick=" showCalendarControl(txtFromDate) " href="#">
<img src="../images/calendar.gif" style="height: 20px; width: 20px;" border="0" alt="Calendar" /></a>
</td>
这是我的CSS(我为ui-datepicker添加了z-index更改,但它似乎没有帮助):
<style type="text/css">
.body
{
background-color: #006699;
}
.outermost_body
{
background: White;
border-color: Black;
border-style: solid;
border-width: 2px;
height: 120px;
left: 10px;
position: absolute;
text-align: left;
top: 200px;
width: 700px;
}
.outermost_grid
{
height: 320px;
left: 10px;
position: absolute;
text-align: left;
top: 200px;
width: 500px;
}
.searchTable
{
background-color: #C9EAF3;
left: 5px;
padding: 1px;
position: absolute;
text-align: left;
top: 50px;
width: 700px;
z-index: 900;
}
.fieldcellText input
{
background-color: #D7E5F2;
border: 1px solid #284279;
color: #102132;
font: 11px Verdana, Geneva, Arial, Helvetica, sans-serif;
margin-left: 0px;
width: 150px;
}
.ui-datepicker
{
z-index: 999;
}
</style>
答案 0 :(得分:3)
z-index
仅适用于定位元素
position:absolute
,position:relative
或position:fixed
试试这个,
.ui-datepicker{
position: relative;
z-index: 1001;
}
答案 1 :(得分:1)
您应该能够设置日期选择器的z-index。 尝试将其添加到css表的底部。
.ui-datepicker {
z-index: 999;
}