对于以后的问题,我强烈建议您同时发布生成的 HTML 客户端代码,因为这是 CSS 的作用。它将帮助人们更快地了解问题并更快地找到解决方案。
没有看到您的完整源代码或客户端 HTML,这都是猜测;但是,我相信您的问题与the stack(ing) order 有关。
基本上,我认为您的设置(特别是根据您对 Rens Tillmann 的回答的回答来判断)如下:
HTML:
<div id="header">
...Fixed content showing above modal popup...
</div>
<div id="content">
...Modal background element + Modal popup content...
</div>
在这种情况下,如果#header 的z-index 大于#content 的z-index(假设#content 具有适当的堆叠上下文),则固定标头将始终显示在模式上方内容,因为模态内容位于#content 的堆叠上下文的子上下文中。这意味着无论你给什么z-index模态内容,它总是低于#header。
Here is a JSFiddle to illustrate the issue.
那么,我们能做些什么呢?目前我能想到的四种解决方案可以得到#header以上的模态内容。
如果您的网站设计允许,解决方案 4 是最简单的潜在解决方案。
解决方案一:
使#content 的堆叠顺序高于#header。这不是答案,因为我假设我们需要 #header 浮在 #content 上方。
这样做会使正常内容显示在标题内容上方。
JSFiddle to illustrate why this won't work.
解决方案 2:
将#header 放入与模态相同的堆叠上下文中。这可以工作;但是,根据您的网页在 HTML 和 CSS 中的布局方式,这可能是不可能的。
要将#header 放入与模态框相同的堆叠上下文中,最简单的方法是将其移动为模态框的sibling 元素。
JSFiddle to illustrate this solution.
此解决方案的另一个潜在缺点是,将标题放在内容中可能会在语义上造成混淆。
解决方案 3:
将模态背景+内容放入#header元素的同一个堆叠上下文中。根据您的 ASP.Net 代码的设置方式,这可能是不可能的。我不完全掌握 AjaxControlToolkit 的工作原理。所以我不知道这是否可能。
最简单的方法是将ModalPopup 和Panel 标记移动到#header 元素的siblings。
HTML:
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
如果您这样做,它们的z-index 值将位于相同的上下文中并且可以相互影响。
Here is a JSFiddle to illustrate this in action.
注 1:
在解决方案3中,您还可以将模态置于比#header 的堆栈上下文更高的堆栈上下文中,它仍然可以工作。
例如,这也可以(假设模态的z-index 高于#wrapper 元素):
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
<div id="wrapper">
<div id="header">
...fixed header content...
</div>
<div id="content">
...regular content...
</div>
</div>
注2:
要处于相同的堆叠上下文中,您不必是兄弟元素。你应该有兄弟堆叠上下文。
例如:
<div class="has-stacking-context" style="z-index: 2;">
(stacking context sibling 1)
...content will show in middle...
</div>
<div class="no-stacking-context">
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 3;">
(stacking context sibling 2)
...content will show above everything...
</div>
</div>
</div>
<div class="has-stacking-context" style="z-index: 1;">
(stacking context sibling 3)
<div class="no-stacking-context">
<div class="has-stacking-context" style="z-index: 100000;">
(subcontext of sibling 3's stacking context)
...content will show below everything...
</div>
</div>
</div>
物理移动元素(正如我在解决方案 2 和 3 中所做的那样)只是回避了删除各种堆叠上下文以使两个堆叠上下文成为兄弟的任何需要。有时无法移除某些元素的堆叠上下文。
解决方案4(可以这么简单吗?):
这基本上是解决方案 3 的另一种方法。我们不是物理移动模态元素以匹配堆叠上下文,而是消除阻止 #header 和模态元素堆叠上下文成为同级的堆叠上下文。
取决于您的 CSS 的设置方式,这可能有效,也可能无效。
例如,可以只删除 #content 元素的堆叠上下文,以便它们成为堆叠上下文兄弟。
Here is a JSFiddle to illustrate the easiest potential solution.
请注意,我删除了 #content 元素的 z-index 属性(和 position 属性)。它现在没有堆叠上下文。您可以对模态元素的所有祖先元素执行此操作,以查看它是否有效。请记住,其中一些祖先可能实际上需要它们的堆叠上下文...
最终解决方案(与您交谈后):
所以,在查看了您的代码之后。我基本上使用解决方案 4 解决了这个问题。您的结构如下所示:
<div class="HeaderContainer">
</div>
<div id="contentAreaMasterPage">
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_foregroundElement" style="position: fixed; z-index: 100001; left: 38.5px; top: 10px;">...</div>
<div id="ctl00_MainContentPlaceHolder_ImageThumbnailList_ImageViewer_mpeImageViewer_backgroundElement" class="modalBackground" style="position: fixed; left: 0px; top: 0px; z-index: 10000; width: 1003px; height: 601px;"></div>
</div>
因为.HeaderContainer 具有10 的z-index 和#contentAreaMasterPage 具有9 的z-index,所以#contentAreaMasterPage 中的所有内容将始终显示在.HeaderContainer1 下方。因此,即使这两个模态元素的 z-index 值是 .HeaderContainer 的 z-index 的 10 的 100 倍以上,它们仍将始终显示在其下方,因为它们位于 #contentAreaMasterPage 的 @987654375 内部@9。
因此,我们想要摆脱#contentAreaMasterPage 的z-index,这样它就不再有一个堆栈上下文来介于.HeaderContainer 和模态元素的z-index 值之间。在这种情况下删除z-index 是安全的,因为.HeaderContainer 无论如何都会显示在#contentAreaMasterPage 上方,而#contentAreaMasterPage 不需要较低的z-index。
相关的解决方案 CSS 代码如下:
#contentAreaMasterPage {
z-index: auto !important;
}
由于您无法修改主模板或主 CSS 文件,因此该文件位于您的特定页面中。