禁用状态下Ajax文本框日历图标与其他日历弹窗重叠问题求解

页面上有多个Ajax文本框日历控件，所有控件启用时，日历图标不会与其他日历弹窗重叠或显示在其他弹窗上。

点击日历图标后的效果：

控件禁用时的效果：

现在用户点击禁用控件上方的日历时，图标会出现重叠：

我尝试调整position和z-index属性但问题仍未解决，请问需要添加什么样式才能避免重叠？以下是我尝试过的CSS：

style="postion:relative;z-index:10000"

日历控件视图代码如下：

<tr id="BeginDate"  runat="server">
        <td class="pboldfont" style="width: 5%;">
            &nbsp;&nbsp;<asp:Label ID="lblBeginDate" runat="server"  />
        </td>
        <td class="ps-setwidth" style="width: 30%;">
            &nbsp;<label  ID="lblBeginDate" runat="server" Text="Begin Date"  LabelForControl="txtBeginDate"/>
        </td>
        <td class="ps-controls" style="width: 65%;">&nbsp;
        <asp: txtcalendar style="position: relative; z-index: 0;" ID="txtBeginDate" runat="server" MaxLength="10" DataFieldName="RequestedBeginDate" IsRequiredField="true" EnableClientScript="true"  CalendarMask="99/99/9999" EnableTheming="True"  />
        </td>
    </tr>

解决方案 #

首先排查到你写的CSS里postion是拼写错误，正确拼写为position，拼写错误会导致整行样式失效，这是你之前调整属性不生效的核心原因之一。另外你给日历控件本身设置了z-index: 0，会导致它的弹出层继承了低堆叠层级，被下方禁用状态的控件元素压住。

你可以按以下步骤修改：

• 给所有日历控件所在的外层单元格ps-controls按从上到下的DOM顺序设置递减的z-index，越靠上的行z-index值越高，确保上层弹窗不会被下层元素遮挡：

/* 第一行日期控件所在单元格 */
.ps-controls:first-of-type {
    position: relative;
    z-index: 999;
}
/* 第二行日期控件所在单元格 */
.ps-controls:nth-of-type(2) {
    position: relative;
    z-index: 998;
}
/* 后续行以此类推，z-index逐行减1即可 */

• 移除日历控件行内样式里的z-index: 0，同时给日历弹出层设置固定高优先级z-index：

/* 把类名替换为你实际使用的日历弹窗的CSS类名 */
.calendar-popup {
    position: absolute !important;
    z-index: 9999 !important;
}

• 如果禁用状态的控件自带更高层级，可以单独给禁用控件设置低层级：

/* 替换为你实际禁用控件的类名 */
input:disabled + .calendar-icon {
    position: relative;
    z-index: 1;
}

修改完成后上层弹出的日历会始终处于更高的堆叠层级，不会出现被下层控件遮挡的重叠问题。

内容的提问来源于stack exchange，提问作者AMDI