对于未来的问题，我强烈建议您同时发布生成的 HTML 客户端代码，因为这是 CSS 的作用。它将帮助人们更快地理解问题并更快地找到解决方案。
没有看到您的完整源代码或客户端 HTML，这都是猜测；但是，我相信您的问题与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。
这是一个 JSFiddle 来说明这个问题。
所以，我们能做些什么？目前我能想到的获取上述模态内容的解决方案有四种。#header
如果您的网站设计允许，解决方案 4 是最简单的潜在解决方案。
解决方案1：
Make#content具有比 更高的堆叠顺序#header。这不是答案，因为我假设我们需要#header漂浮在#content.
这样做会使正常内容显示在标题内容上方。
JSFiddle 来说明为什么这不起作用。
解决方案2：
放入#header与模态相同的堆叠上下文中。这可以工作；但是，根据您的网页在 HTML 和 CSS 中的布局方式，这可能是不可能的。
要放入#header与模态相同的堆叠上下文中，最简单的方法是将其移动为sibling模态的元素。
JSFiddle 来说明这个解决方案。
此解决方案的另一个潜在缺点是，将标题放在内容中可能会在语义上造成混淆。
解决方案3：
将模态背景+内容放入#header元素的同一个堆叠上下文中。根据您的 ASP.Net 代码的设置方式，这可能是不可能的。我不完全掌握 AjaxControlToolkit 的工作原理。所以我不知道这是否可能。
最简单的方法是将ModalPopup和Panel标记移动到siblings元素#header中。
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值将处于相同的上下文中并且可以相互影响。
这是一个 JSFiddle 来说明这一点。
注1：
在解决方案 3中，您还可以将模态置于比#header's stacking context 更高的 stacking context 中，它仍然可以工作。
例如，这也可以工作（假设模态有一个高于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元素的堆叠上下文，以便它们成为堆叠上下文兄弟。
这是一个 JSFiddle 来说明最简单的潜在解决方案。
请注意，我删除了元素的z-index属性（和position属性） 。#content它现在没有堆叠上下文。您可以对模态元素的所有祖先元素执行此操作，以查看它是否有效。请记住，尽管其中一些祖先可能实际上需要他们的堆叠上下文......
最终解决方案（与您聊天后）：
因此，在查看您的代码之后。我基本上使用解决方案 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>
因为.HeaderContainerhas a z-indexof10和#contentAreaMasterPagehas a z-indexof 9，所以里面的东西#contentAreaMasterPage总会出现在下面.HeaderContainer1。因此，即使这两个模态元素的值是's of 的z-index100 倍以上，它们也将始终显示在其下方，因为它们位于's of内部。.HeaderContainerz-index10#contentAreaMasterPagez-index9
因此，我们想要摆脱#contentAreaMasterPage's z-index，这样它就不再有一个堆叠上下文来获得介于.HeaderContainer's 和模态元素的z-index值之间。z-index在这种情况下删除 是安全的，因为无论如何.HeaderContainer都会显示在上方而无需较低的.#contentAreaMasterPage#contentAreaMasterPagez-index
因此，相关的解决方案 CSS 代码很简单：
#contentAreaMasterPage {
z-index: auto !important;
}
由于您无法修改主模板或主 CSS 文件，因此它位于您的特定页面中。