UpdatePanel and UpdateProgress Position Control

.content
{
position: relative; width:100%
}
.updateprogresswrapper {
            text-align:center; 
            position:absolute;
            opacity:0.5; 
            vertical-align: middle; 
            z-index: 1000;
            height: 100% !important; 
            width: 100%  !important;
            overflow:hidden;
            background-color:gray;
            top:0px; 
            bottom: 0px; 
            left: 0px; 
            right: 0px
        }
        
        .updateprogressindicator {
            top:50%; 
            position: relative
        }

<div class="content">
<asp:UpdatePanel runat="server" ID="updpnl2" ChildrenAsTriggers="true" UpdateMode="Conditional">
            <ContentTemplate>
                 <asp:updateprogress id="UpdateProgress1" runat="server" associatedupdatepanelid="updpnl2" dynamiclayout="true"
                        DisplayAfter="0">
                            <progresstemplate>
                                <div class="updateprogresswrapper">
                                    <div class="updateprogressindicator">
                                            <img src="../images/ajax-loader_2.gif"/>
                                    </div>
                                </div>
                            </progresstemplate>
                  </asp:updateprogress>
....

The source of Html page will like

<div class="content">
<div id="MainContent_updpnl2">
                 <div id="MainContent_UpdateProgress1" style="display: none; " role="status" aria-hidden="true">
	
                                <div class="updateprogresswrapper">
                                    <div class="updateprogressindicator">
                                            <img src="../images/ajax-loader_2.gif">
                                    </div>
                                </div>

So put UpdateProgress inside UpdatePanel can easily control UpdateProgress to only cover the UpdatePanel instead of the whole web page.