Question

I have a little window that says loading. Sometimes it gets covered up by other controls on the page. How can I increase it’s z-index so that it is always on top. Is there an attribute I can set so that it is always on top?

Here is the code for it:

<script type="text/javascript" language="javascript"></script>
<form id="form1" runat="server">
<div>
    <ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePageMethods="true">
        <Scripts></Scripts>
    </ajaxToolkit:ToolkitScriptManager>
<asp:UpdateProgress ID="ProgressBar" runat="server" AssociatedUpdatePanelID="UpdatePanel1" DisplayAfter="200">
    <ProgressTemplate>
        <div id="Loading">
        <img src='Images/loading.gif' alt='loading...' />
            <br /><br />Loading...
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>

Answer 1

<div id="Loading" style="z-index: 999999;"></div>

There are certain elements that no matter what, will show above yours. Dropdowncontrols in IE6 and 7 I think will always show over it.

If you have flash objects, you’ll need to update their wmode setting to transparent I believe as well.