具有最大z-index的固定位置div仍显示在contentplaceholder内容之后

Question

我在ContentPamplate内的母版页中有一个错误对话框，它位于UpdatePanel中。错误对话框是一个用户控件（ascx），其中包含div和一个标签。具有相关位的div看起来像这样：

<asp:UpdatePanel ID="updPanelContent" runat="server" ChildrenAsTriggers="true" UpdateMode="Always">
<ContentTemplate>
    <div>
        <err:ctrlError ID="error1" runat="server" Visible="true" />
    </div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    </asp:ContentPlaceHolder>
</ContentTemplate>
</asp:UpdatePanel>

错误对话框如下所示：

<div class="divError" visible="false" runat="server" id="div">    
    <asp:Label ID="lblError" runat="server"></asp:Label>
</div>

我要求让错误对话框显示在屏幕中心而不是内联，因此我将标签周围的div样式设置为固定位置。样式现在看起来像这样：

.divError
{
    border: thin groove #808080;
    background-color: #F7F6F3;
    clip: rect(10px, 10px, 10px, 10px);
    color: #FF0000;
    width:500px;
    min-height:50px;
    text-align: center;
    margin-left: -300px;
    height: 400px;
    margin-top: -200px;
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 2147483647;
}

无论我将z-index设置为什么，divError div的内容都会显示在contentplaceholder的内容后面。以下是z-index设置为2147483647的示例的链接。

为什么会发生这种情况？

Answer 1

您的问题：为什么会发生这种情况？

答：由于.divError位于堆叠上下文中，并且该堆叠上下文的根目录为z-index（已计算或显式声明）低于“{over”.divError内容其余部分的堆叠上下文的根。

如果你想知道如何“解决”这个问题，那么需要通向updPanelContent及其周围的DOM树以及应用于这些元素的定位和z-index。

Answer 2

当我多年前这样做时，我从个人项目中偷了一些代码，似乎div需要一个显示元素才能工作。我也放弃了那个clip元素，因为我不知道它是做什么的。风格现在看起来像这样：

.divError
{
    border: thin groove #808080;
    position: fixed;
    color: #FF0000;
    z-index: 3000;
    width: 600px;
    height: 300px;
    top: 200px;
    left: 400px;
    display: inline-block;
    background-color: #FFFFFF;
}

有效。