在不使用 position:absolute 的情况下重叠多个用户控件 (div)

Question

我已经阅读了很多关于重叠 div 的场景，但 none 正在与我一起工作。这是我现在的UI：

这是我的部分 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>

但是当用户控件展开时（当我单击 Close/Register 耐心按钮时），它将如下所示：

这是我不喜欢发生的事情。我想将它重叠在其他用户控件上并显示如下：

我还想把它应用到所有的床上，而不仅仅是床 1。

Answer 1

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

Answer 2

我找到了我的问题的答案，但它与答案相矛盾，因为我放置了属性 position:absolute。我将它放在我的用户控件 table 的 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%;
}

在不使用 position:absolute 的情况下重叠多个用户控件 (div)

overlap multiple user controls (div) without using position:absolute

html

css

vb.net

asp.net

user-controls