Set a popup control on top of another pop up control using z-index

Question

i am trying to set my error popup control on top of another popup control. i know that z-index is the solution but nothing works. i've tried applying it to any/all divs and classes. what am i doing wrong?

Markup

<!-- 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 -->

Brian Hansen · Accepted Answer · 2013-01-20T02:59:52.147

1

Z-index only works on positioned elements.

You'll need to give the ErrorInputContainer position:absolute, position:relative, or position:fixed for the z-index to work.

UPDATE

If you choose to use absolute positioning, keep in mind that "top:" and "left:" positioning will be relative to the first non-static ancestor.

All elements have "static" positioning by default - so you'll have to set "position:relative" in the css of another element if you want your pop-up to be positioned relative to that element.

Example

<!-- 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>

edited Jan 20 '13 at 02:59

answered Jan 20 '13 at 01:08

Brian Hansen

206
2
6

hi - that did not work - see my updated markup above. any other ideas? been at this for hours. – user1438082 Jan 20 '13 at 01:21
Usually when using position:absolute you need to set the position as well with left:0px and top:0px (which will position the element relative to the upper left of the page). Not sure if that would influence the z-index or not; what do you mean by "not work"? – Brian Hansen Jan 20 '13 at 01:42
I confirmed that this should work with an [html-only example](http://www.therealbrianhansen.com/so/test.html) - so I'm not really sure where your problem is. – Brian Hansen Jan 20 '13 at 02:04
ok - it should work but it doesn't - so i am going to build a separate web app to test where this is going wrong. ill report back when i find out what is wrong – user1438082 Jan 20 '13 at 16:40

Set a popup control on top of another pop up control using z-index

1 Answers1

UPDATE

Example