为什么 div 叠加在其他之上？

Question

我保留了一个 Javascript 函数 printthis() 用于打印 div id printthis 中的所有内容，除了 [=27= 给出的内容] d-print-none。该代码在开始页面（打印前的页面）中运行良好。

但是点击打印后，页面对齐错误，意味着 table 头出现在 2 个地址 div 之间，如下面的 link，我想要 table 标题出现在地址块之后，就像它在打印前出现在页面中一样。

我该如何解决这个问题？我能得到一些帮助吗？

上面的 link.

中提供了完整的脚本 & css

<div id="printthis">
        <div class="container-fluid">
            <div id="ui-view" data-select2-id="ui-view">
                <div>
                    <div class="card">
                        <style>
                        </style>

                      <div class="card-header">
                        <a class="float-right mr-1 d-print-none" href="#" onclick="printthis()" data-abc="true"><i class="fa fa-print fa-fw" title="Print Invoice"></i></a>
                      </div> 
                   </div>
                   <div class="card-body">
                       <div class="row mb-4">
                          <div class="col-sm-8 address2" style="margin-bottom: 0rem!important;">
                              <div><img width='40px' height='40px' src=''> <strong>yyy</strong>      
                                     <div>  kbjk</div>
                                     <div>Email: ui</div>
                                     <div>Phone: 45546</div>
                             </div>
                           </div>
                           <div class="col-sm-4 ml-auto address">
                             <div><h6></h6></div>
                                  <div><strong>xfgfggggggggg</strong></div>
                                  <div>tttttttttt</div>
                                  <div>lllllllll</div>
                                  <div>Email: ac@r.com</div>
                                  <div>Phone: 222222</div>
                            </div>
                                  

                         </div>
                         <hr class="d-print-none addrow">
                        
                          <table class="table text-centered table-bordered bill-tab">
                             <thead class="table-header h" id="theader">
                                 <tr><th class="lefttable-des"><h5>Description</h5></th>
                                     <th class="table-des"><h5>Amount</h5></th></tr>
                             </thead>
                          </table>
                </div>
               </div>
                </div>
            </div>
        </div>

Answer 1

为 bill-tab 贡献 width:100%。

.bill-tab {
                  overflow-x: auto;
                  border-spacing: 2px;
                  border: 1px solid #dee2e6;
                  max-width: 100%;
                  width: 100%;
           }

为什么 div 叠加在其他之上？

Why a div overlays above other?

html

javascript

css

overlay

position