перекрывает несколько пользовательских элементов управления (div) без использования позиции: абсолютный

Question

Я уже прочитал много сценариев относительно перекрывающихся div, но никто не работает со мной. Это мой текущий интерфейс:

и это мой частичный код ASPX:

  <table style="width:100%;"> 
       <tr style="width:100%;">       
        <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed1" TempHospNum="ER101" id="statform1" /></td> 
        <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed2" TempHospNum="ER102" id="statform2" /></td> 
        <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed3" TempHospNum="ER103" id="statform3" /></td> 
       </tr>        
      </table> 


      <table style="width:100%;"> 
       <tr style="width:100%;">       
         <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed4" TempHospNum="ER104" id="statform4" /></td> 
         <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed5" TempHospNum="ER105" id="statform5" /></td> 
         <td style="width:33.33%; vertical-align:top;"><uc1:statform runat="server" ERBedNumber="Bed6" TempHospNum="ER106" id="statform6" /></td> 
       </tr>        
         </table>     
      <table style="width:100%;">   
       <tr style="width:100%;">               
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed7" TempHospNum="ER107" id="statform7" /></td> 
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed8" TempHospNum="ER108" id="statform8" /></td> 
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed9" TempHospNum="ER109" id="statform9" /></td> 
       </tr> 

      </table> 

      <table style="width:100%;">   
       <tr style="width:100%;">               
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed10" TempHospNum="ER110" id="statform10" /></td> 
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed11" TempHospNum="ER111" id="statform11" /></td> 
         <td style="width:33.33%; vertical-align:top; "><uc1:statform runat="server" ERBedNumber="Bed12" TempHospNum="ER112" id="statform12" /></td> 
       </tr> 

      </table> 

     </asp:Panel> 

Но когда разрастается управления пользователя (когда я нажмите кнопку Закрыть/Регистрация кнопку Patient), это будет выглядеть это:

Что мне не нравится. Я хочу, чтобы перекрывать его на других пользовательских элементов управления и выглядеть следующим образом:

Я также хочу, чтобы применить его на все кровати, не только кровать 1.

Answer 1

я понял, ответ на мой вопрос, но это противоречит его, потому что я поместил положение объекта: абсолютное. Я поместил его в css моего стола в свой пользовательский элемент управления, но он исправил мою проблему, и это привело меня к моему желаемому результату.

.pnlUserControl{ 
padding:20px; 
border: 1px solid rgba(0,0,0,.8); 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
border-radius: 5px; 
-moz-background-clip: content-box; 
-webkit-background-clip: content-box; 
background-clip: content-box; 
background:rgba(0, 0, 0, 0.8); 
-moz-box-shadow: 0 0 13px 3px rgba(0,0,0,.3); 
-webkit-box-shadow: 0 0 13px 3px rgba(0,0,0,.3); 
box-shadow: 0 0 13px 3px rgba(0,0,0,.3); 

<%-- i added some css to display it on full screen 
    to avoid clicking of other buttons --%> 
position:absolute; 
left:0; 
top:0; 
width:100%; 
height:100%; 
} 

Answer 2

Используя только CSS, id говорят, что вы используете position: relative, что делает их относительно их родителей. Оттуда ... Просто сделайте top:-50px или left: -37px или любые другие значения, которые вам нужны. После установки на относительный просто использовать сверху, снизу, слева и справа корректировать свою позицию либо положения/отрицательного