重叠多个用户控件（div）而不使用位置：绝对答案

【问题标题】：overlap multiple user controls (div) without using position:absolute重叠多个用户控件（div）而不使用位置：绝对
【发布时间】：2015-07-09 14:41:05
【问题描述】：

我已经阅读了许多关于重叠 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。

【问题讨论】：

标签： html css asp.net vb.net user-controls

【解决方案1】：

仅使用 CSS，我说你可以使用 position: relative 使它们相对于它们的父级。从那里...只需执行top:-50px 或left: -37px 或您需要的任何值。设置为相对后，只需使用 top、bottom、left 和 right 来调整其位置 position/negative

【讨论】：

除了css，我还有其他选择吗？我如何在 js 或 jquery 中做到这一点？

【解决方案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%;
}

【讨论】：