Loading indicator "position:absolute" always displays on top..

Question

I am showing a loading indicator with asp:updateprogress control. Here is my css,

.loading {
   background-color:#404040;
   color:#fff;
   top:0px;
   left:45%;
   height:23px;
   position:absolute;
   font-weight:bold;
   -moz-border-radius-bottomleft:3px;-webkit-border-bottom-left-radius:3px;
   -moz-border-radius-bottomright:3px;-webkit-border-bottom-right-radius:3px;
   clear: both;
 }

It works fine when i do an ajax update at the top of the page i can see the loading indicator but when i scroll down to my bottom and do an ajax update the loading indicator doesn't seem to show up. I think it is because of the css position. Any suggestion to make it visible irrespective of my scrollbar position.

<asp:UpdateProgress ID="UpdateProgress1" runat="server" DynamicLayout="false" DisplayAfter="0">
        <ProgressTemplate>
            <div class="loading" style="padding-left: 5px; margin-bottom: 5px;">
                Loading...&nbsp
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>

Answer 1

Try giving the parent div position:relative, or if you want it to be displayed in the same place no matter the scroll position on the page, try position:fixed

Reference:

• http://www.w3schools.com/Css/pr_class_position.asp

Answer 2

use position: fixed;