使用 z-index 在另一个弹出控件之上设置一个弹出控件

Question

我正在尝试将我的错误弹出控件设置在另一个弹出控件之上。 我知道 z-index 是解决方案，但没有任何效果。我已经尝试将它应用于任何/所有 div 和类。我做错了什么？

标记

<!-- Error Modal Form -->
    <asp:HiddenField ID="hideForModal" runat="server" />
    <ajaxToolkit:ModalPopupExtender runat="server" ID="ErrorModal" BehaviorID="modalPopupExtenderError"
        TargetControlID="hideForModal" PopupDragHandleControlID="PanelErrorOuter" PopupControlID="PanelErrorOuter"
        OkControlID="btnOk" BackgroundCssClass="modalBackground" DropShadow="False" Drag="true" >
    </ajaxToolkit:ModalPopupExtender>
    <ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender3" runat="server" TargetControlID="PanelErrorInner">
    </ajaxToolkit:RoundedCornersExtender>
    <asp:Panel ID="PanelErrorOuter" runat="server" BackColor="Transparent" Style="display:none; ">
        <asp:Panel ID="PanelErrorInner" runat="server" BackColor="White" Width="480" Height="300"   >
            <div id="ErrorInputContainer" style=" position:absolute; z-index:80000 !important;" >
                <div>
                    <b>Error Code:</b></div>
                <asp:Label ID="lblErrorCode" runat="server" Text="Error Code"></asp:Label>
                <div>
                    <b>Error Message:</b></div>
                <asp:Label ID="lblErrorMessage" runat="server" Text="Error Message"></asp:Label>
                <div>
                    <b>Ex message:</b></div>
                <asp:Label ID="lblExMessage" runat="server" Text="Ex Message"></asp:Label>
                <br />
                <asp:LinkButton ID="LinkButton1" runat="server" CssClass="close" OnClientClick="$find('modalPopupExtenderError').hide(); return false;" />
                <div id="Acknowledge">
                    <asp:Button ID="btnOk" runat="server" Text="Ok" CssClass="Button" />
                </div>
            </div>
            <br />
        </asp:Panel>
    </asp:Panel>
    <!-- End Error Modal Form -->

Answer 1

Z-index 仅适用于定位元素。

您需要为 ErrorInputContainer 提供 position:absolute、position:relative 或 position:fixed 以使 z-index 起作用。

更新

如果您选择使用绝对定位，请记住“top:”和“left:”定位将相对于第一个非静态祖先。

默认情况下，所有元素都具有“静态”定位 - 因此，如果您希望弹出窗口相对于该元素定位，则必须在另一个元素的 css 中设置“position:relative”。

示例

<!-- Relative to parent div -->
<div style="position:relative;">
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>

<!-- Relative to document window -->
<div>
   <div style="position:absolute; top:0px; left:0px;">
   </div>
</div>