如何解决ASP.NET WebForms中Div样式重叠渗透至周边Div的问题

我在教育行业使用老旧的ASP.NET WebForms技术，遇到一个奇怪的问题：当设置某个Div（InvalidDiv）可见时，它的红色警示样式会渗透/重叠到上方完全独立的Div中，而且这个异常出现在Bootstrap模态框内，怀疑可能和UpdatePanel有关。

原.aspx代码片段 #

<asp:UpdatePanel ID="upModal" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
    <ContentTemplate>
        <div class="col-md-12" style="padding:10px 15px;">
            <p>Please check the box when the student answers a question correctly.</p>
            <p id="VerificationInstructions" runat="server"></p>
        </div>
        <div class="form-group alert alert-danger" id="InvalidDiv" style="margin:20px 0px 0px;" runat="server" visible="false">
            <asp:Label ID="InvalidLabel" CssClass="alert-link" runat="server" Text="" />
        </div>

Chrome渲染后的HTML结构 #

<div class="col-md-12" style="padding:10px 15px;">
    <p>Please check the box when the student answers a question correctly.</p>
    <p id="ContentPlaceHolder1_VerificationInstructions">Once as student has answered 5 questions correctly, click "Finish Verification".</p>
</div>
<div id="ContentPlaceHolder1_InvalidDiv" class="form-group alert alert-danger" style="margin:20px 0px 0px;">
    <span id="ContentPlaceHolder1_InvalidLabel" class="alert-link">The student must answer at least 5 questions correctly for successful verification.</span>
</div>

观察到InvalidDiv似乎显示在上方Div的后方并产生重叠，这里提供几个快速简便的修复方法：

• 给上方Div添加背景色：
  修改上方Div的样式，添加白色背景挡住下方的红色渗透：

  <div class="col-md-12" style="padding:10px 15px; background-color:#ffffff;">
  

• 插入清除浮动元素：
  在两个Div之间添加Bootstrap的clearfix类元素，确保布局遵循正常文档流：

  </div>
  <div class="clearfix"></div>
  <div class="form-group alert alert-danger" id="InvalidDiv" ...>
  

• 调整InvalidDiv的层级：
  给InvalidDiv添加相对定位和层级属性，让它正常显示在上方Div之后：

  <div class="form-group alert alert-danger" id="InvalidDiv" style="margin:20px 0px 0px; position:relative; z-index:1;" runat="server" visible="false">
  

内容的提问来源于stack exchange，提问作者Ryan Kent