html - AJAX 控制工具包自动完成出现在模式弹出窗口后面

Question

我在 AJAX 控制工具包内的 AutoCompleteExtender 遇到了问题，我似乎无法深入了解。该控件位于 asp:Panel 中，该面板链接到工具包中的 ModalPopupExtender。一切在最新一代的 IE9、FF 和 Opera 中运行良好，但在 Safari 和 Chrome 中出现故障(假设它与 WebKit 相关)。

问题是自动完成的下拉菜单落在模态弹出窗口后面而不是前面(出于隐私原因，名称模糊):

查看 Firebug 中的内容，这是在无序列表中呈现的下拉列表:

<ul id="EmployeeAutoCompleteExtender_completionListElem" class="autoCompleteList" style="width: 281px; visibility: visible; position: absolute; left: 0px; top: 22px; z-index: 1000; ">

autoCompleteList 类如下所示:

.autoCompleteList
{
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
}

模态弹出窗口的结果 div 如下所示:

<div id="MainContent_AddPeoplePanel" class="modalPopup" style="z-index: 100001; position: absolute; left: 719px; top: 352.5px; opacity: 1; ">

使用以下 modalPopup CSS 类:

.modalPopup
{
  background-color: White;
  padding: 10px;
  width: 462px;
}

我的假设是列表中较低的 z-index 导致它落后于 div 但话又说回来，它在非 WebKit 浏览器中表现不错。 Z 索引也是内联样式，因此它们显然直接来自控件。我在这里错过了什么吗？有什么建议么？ (除了放弃 WebForms 和 AJAX 并采用 jQuery)

Answer 1

既然您怀疑是 z-index 导致了问题，那么如果您尝试使用 !important 覆盖 Ajax Control Toolkit 吐出的内联样式，会发生什么情况？

.autoCompleteList {
  list-style: none outside none;
  border: 1px solid buttonshadow;
  cursor: default;
  padding: 0px;
  margin: 0px;
  z-index:2000 !important;
}

.modalPopup {
  background-color: White;
  padding: 10px;
  width: 462px;
  z-index:1000 !important;
}

我知道这有点难，但如果您还没有尝试过，可能值得一试？