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

Question

我在位于 UpdatePanel 内的 ContentTemplate 内的母版页中有一个错误对话框。错误对话框是一个用户控件 (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

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

A: 因为 .divError 在一个堆栈上下文中并且那个堆栈上下文的根有一个 z-index (计算或显式声明)低于“超过”.divError 的其余内容的堆栈上下文的根。

如果您想知道如何“解决”这个问题，则需要指向和围绕 updPanelContent 的 DOM 树以及应用于这些元素的定位和 z-index。