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.