我在页面顶部有一个标题div，主页面中有Position: fixed。
在内容页面中，我有一个模态弹出窗口，我想要占用大部分屏幕，但弹出窗口显示从标题div结束的位置（即从顶部开始）
我有弹出和弹出背景类的css ......
.modalBackground {
background-color: #AAAAAA;
-moz-opacity: 0.7;
opacity: 0.7;
filter: alpha(opacity=70);
}
.modalPopup {
position: relative;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
}
并且为模态背景生成了这个css（在显示模态弹出窗口之后）：
{
position: fixed;
left: 0px;
top: 0px;
z-index: 10000;
width: 1003px;
height: 598px;
}
更新1 这是ModalPopup标记：
<ajaxToolkit:ModalPopupExtender ID="mpeImageViewer" runat="server" Drag="false" PopupControlID="pnlImageViewer" Y="90"
TargetControlID="imgEmpty" BackgroundCssClass="modalBackground" CancelControlID="imgClose" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
和Panel标记：
<asp:Panel ID="pnlImageViewer" runat="server" Style="display: none;" Width="975px" Height="550px" CssClass="modalPopup"></asp:Panel>
更新2 标题中有一个菜单，也需要显示。我很感谢人们特别为 _ _所做的一切努力。
我将在几分钟内分享弹出窗口的截图
更新3
从Chrome查看源代码后附加源代码... Source Code
更新4
附加相应的CSS文件......
答案 0 :(得分：2)
如果您有以下HTML结构：
<div class="header">
here is your header content
</div>
<div class="content">
here is your model somewhere
</div>
你的 .header 有一个z-index:2;，你的 .content 在这个部门内有z-index:1;个内容（也许在这种情况下）您的模型将始终显示在标题下方。
在这种情况下我无法想到其他任何事情。
答案 1 :(得分：1)
对于将来的问题，我强烈建议发布生成的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的{{1}}大于z-index＆＃39; s #content（假设z-index具有正确的堆叠背景），然后固定标题将始终显示在模态内容之上，因为模态内容位于#content堆叠上下文的子上下文中。这意味着无论您提供模态内容的#content是什么，它都将始终低于z-index。
Here is a JSFiddle to illustrate the issue.
那么，我们能做什么？有四个解决方案可以获得我目前可以想到的#header以上的模态内容。
如果您的网站设计允许，解决方案4是最简单的潜在解决方案。
使#header的堆叠顺序高于#content。这不是答案，因为我假设我们需要#header浮动#header以上。
这样做会将正常内容显示在标题内容之上。
JSFiddle to illustrate why this won't work.
将#content放入与模态相同的堆叠上下文中。这可以工作;但是，根据您的网页在HTML和CSS中的布局方式，这可能无法实现。
要将#header置于与模态相同的堆叠上下文中，最简单的方法是将其移动到模态的#header元素。
JSFiddle to illustrate this solution.
此解决方案的另一个潜在缺点是，在您的内容中包含标题可能会在语义上造成混淆。
将模态背景+内容放入sibling元素的相同堆叠上下文中。根据ASP.Net代码的设置方式，这可能无法实现。我不完全掌握AjaxControlToolkit的工作原理;所以我不知道这是否可能。
最简单的方法是将#header和ModalPopup标记移至Panel元素的siblings。
<强> HTML：
#header如果您这样做，他们的<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>
值将在相同的上下文中，并且可能会相互影响。
Here is a JSFiddle to illustrate this in action.
注1：
在解决方案3 中，您还可以将模式置于高于z-index堆叠上下文的堆叠上下文中，它仍然有效。
例如，这也可以（假设模态比#header元素高z-index）：
#wrapper注2：
要处于相同的堆叠环境中，您不必是兄弟元素。你应该有兄弟堆叠上下文。
例如：
<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和3中所做的那样）只需要一步一步地移除各种堆叠上下文以使两个堆叠上下文成为兄弟。有时无法删除某些元素的堆叠上下文。
这基本上是做解决方案3的另一种方式。我们不是物理移动模态元素来匹配堆叠上下文，而是消除阻塞<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>
和模态元素堆叠上下文的堆叠上下文不是兄弟姐妹。
根据CSS的设置方式，这可能有效，也可能无效。
例如，可以删除#header元素的堆叠上下文，以便它们成为堆叠上下文的兄弟。
Here is a JSFiddle to illustrate the easiest potential solution.
请注意，我删除了#content元素的z-index属性（和position属性）。它现在没有堆叠上下文。您可以对模态元素的所有祖先元素执行此操作，以查看它是否有效。请记住，虽然其中一些祖先可能实际上需要他们的堆叠上下文......
所以，看完你的代码之后。我基本上使用解决方案4解决了这个问题。您的结构如下所示：
#content由于<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>
的{{1}} .HeaderContainer而z-index 10 #contentAreaMasterPage，z-index内的所有内容都将9始终显示在#contentAreaMasterPage以下。因此，即使两个模态元素的.HeaderContainer1值超过z-index .HeaderContainer z-index {100}的值，它们也会始终显示在它之下，因为他们位于10的{{1}} #contentAreaMasterPage内。
因此，我们希望摆脱z-index 9，以便它不再具有堆叠上下文来介于#contentAreaMasterPage之间。模态元素＆＃39; z-index值。在这种情况下移除.HeaderContainer是安全的，因为z-index无论如何都会显示在z-index之上而.HeaderContainer不需要更低的#contentAreaMasterPage。
因此，相关的解决方案CSS代码就是：
#contentAreaMasterPage由于您无法修改主模板或主CSS文件，因此该内容位于您的特定页面内。
答案 2 :(得分：0)
尝试使用position: relative;代替position: fixed;
.modalPopup {
position: absolute;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
}
{
position: relative;
left: 0px;
top: 0px;
z-index: 10000;
width: 1003px;
height: 598px;
}
例如
<tr>
<td colspan="2">
<asp:Button ID="btnSurveyId" runat="server" Style="display: none;" />
<cc1:ModalPopupExtender ID="mpeSurveyId" runat="server" TargetControlID="btnSurveyId"
CancelControlID="imgCloseSurveyId" BackgroundCssClass="modalBackground" PopupControlID="pnlSurveyId"
PopupDragHandleControlID="pnlIdSurveyName" Drag="true" DropShadow="true">
</cc1:ModalPopupExtender>
<asp:Panel ID="pnlSurveyId" runat="server" CssClass="modalBox" Width="250px" Height="100px"
Style="display: none;">
<asp:Panel ID="pnlIdSurveyName" runat="server" CssClass="caption" Style="margin-bottom: 10px;
cursor: move;">
<table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tr style="border: solid 1px balck; background-color: Gray;">
<td>
<strong style="color: White; vertical-align: middle;"><span id="Span2" runat="server">
Change Survey Id</span></strong>
</td>
<td align="right" valign="top" style="cursor: pointer;">
<img id="imgCloseSurveyId" alt="Close" src="../Images/close.gif" />
</td>
</tr>
</table>
</asp:Panel>
<div style="width: 100%">
<table>
<tr>
<td>
<asp:DropDownList ID="ddlSurveyName" runat="server" Width="190px" Style="margin-left: 30px;">
</asp:DropDownList>
</td>
</tr>
<tr>
<td style="padding: 5px;">
<asp:Button ID="btnSubmitSurvey" runat="server" Text="Submit" Width="100px" ValidationGroup="SurveyId"
Style="margin-left: 20px;" OnClick="btnSubmitSurvey_Click" />
<asp:Button ID="btnCancelSurvey" runat="server" CausesValidation="False" Text="Cancel"
Width="90px" OnClick="btnCancelSurvey_Click" Style="margin-left: 5px;" />
</td>
</tr>
</table>
</div>
</asp:Panel>
</td>
</tr>
答案 3 :(得分：0)
在你的标记中：
<ajaxToolkit:ModalPopupExtender ... PopupControlID="pnlImageViewer" Y="90" ...
您指定了Y="90"，这会导致弹出窗口显示90个像素。删除后请尝试。
答案 4 :(得分：0)
将z index应用于大于背景div
的模式弹出dive.g。
.modalPopup {
position: absolute;
min-height: 200px;
width: 100%;
border: solid 1px #e5e5e5;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: #f5f6f5;
z-index: 90000;
}
答案 5 :(得分：0)
尝试以下（为我工作）：
这是模态弹出窗口的背景样式
.modalBackground
{
background-color:#414141;
filter:alpha(opacity=70);
opacity:0.7;
position:absolute;
}
以下是您要显示的面板的样式
.Panel_Popup_Style
{
background-color:White;
}