在媒体页面打印区域内的绝对位置放置一个 div

Question

我需要打印一个固定大小的页面，里面有一个绝对位置的div：

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

要打印的媒体类：

@page 
{
    size: A4;
    margin: 0; 
}

@media print {
   .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    position: relative;
  }
}

div：

<div id="proc_comp">Printed by Computer</div>

#proc_comp
{
   position: absolute;
   left: 190px;
   bottom: 15px;
   font-size: 0.65em;
}

但是div，当我尝试在浏览器中打印时，它并没有出现在与HTML布局相同的位置，为什么？

谢谢。

Answer 1

出现错误的定位是因为您在 #proc_comp 规则中使用基于像素的放置，而页面使用的是 A4 格式（非基于像素的布局）。您可以尝试使用以下替代方法

#proc_comp {
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -5em;
  margin-top: -1em;
}

您可能需要调整负边距以适应显示消息的高度和宽度，使其显示为居中。