html - 如何使用绝对定位循环CSS？

Question

首先，我想声明，我知道 html 不是打印的最佳选择，但对于我需要的内容，它工作正常。话虽如此，我想设置一个具有绝对定位的页面，该页面将重复自身并在每页之后有一个分页符。我已经了解了如果不使用绝对定位如何添加分页符，但如何使用绝对定位呢？

下面是我的非工作代码:

div {
  position: absolute;
}
div#valueLocation {
  left: 20px;
  top: 305px;
}
.page-break {
  clear: left;
  display:block;
  page-break-after:always;
}

<div id="valueLocation">Name1</div>
<p style="page-break-after: always;"></p>
<div id="valueLocation">Name2</div>
<p style="page-break-after: always;"></p>
<div id="valueLocation">Name3</div>

以上代码导致名称 1、2 和 3 重叠。我怎样才能让每次重启都从它自己的页面开始？如果不可能，我怎样才能将页面上的多个元素定位在特定位置，以便我可以进行分页？我再次了解到，您无法保证打印的内容完美像素，但对于我的需要，上述内容效果很好。

PS:我还包含了我使用的样式以及内联样式，只是为了展示我尝试过的一些不同选项。

Answer 1

它们重叠的原因是因为它们都具有相同的 id。你给所有三个名字这个样式:

div#valueLocation
{
    left: 20px;
    top: 305px;
}

样式设置了它们的位置，因此它们都出现在同一个位置(距左侧 20 像素，距顶部 305 像素)。这与您的分页符无关。