重叠多个用户控件（div）而不使用position：absolute

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>

但是当用户控件扩展时（当我单击关闭/注册患者按钮时），它将如下所示：

我不想发生这种情况。我想在其他用户控件上重叠它，并显示如下：

我也想在所有床上使用，不仅适用于床1。

Answer 1

仅使用CSS，id告诉您使用position: relative使它们相对于其父级。从那里开始......只需top:-50px或left: -37px或您需要的任何值。设置为亲戚后，只需使用顶部，底部，左侧和右侧调整其位置位置/负面

Answer 2

我找到了我的问题的答案，但它与之相矛盾，因为我放置了一个属性位置：绝对。我在我的用户控件中将它放在我的表的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%;
}