将javascript日历控件带到前面?

时间:2013-06-17 18:36:53

标签: html css

我的asp.net网站上有两个javascript日期选择器: enter image description here

当我点击日期选择器时,它看起来像这样: enter image description here

如您所见,日历弹出窗口显示在屏幕上的下一组字段后面。

我的问题是,我该怎么做才能让这个控件出现在屏幕上的字段前面(或者更确切地说)?

编辑: 以下是此特定日期选择器的代码:

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

2 个答案:

答案 0 :(得分:3)

z-index仅适用于定位元素

position:absoluteposition:relativeposition:fixed

试试这个,

.ui-datepicker{
    position: relative;
    z-index: 1001;
}

答案 1 :(得分:1)

您应该能够设置日期选择器的z-index。 尝试将其添加到css表的底部。

.ui-datepicker {
  z-index: 999;
}