Html 带窗口打印的新页面

我有一个表格和两个弹出窗口，我希望在调用操作时打印出来。我遇到的问题是css中的分页符不起作用，我尝试过的其他解决方案也不起作用。目前，两个弹出窗口显示在表数据的顶部，我希望它们要么出现在新页面上，要么一个接一个

HTML

根据w3c（参见

固定部分）：

UAs不得对固定框的内容进行分页

因此，即使将
top:100%
设置为second
。popup
也无法分页

在您的示例中，第二个
.popup
是第一个

通过将
.popup
的位置更改为
绝对值
，并将第二个设置为此样式：

.popup:nth-of-type(2) {
  page-break-before: always;
  top: 100%;
}

谢谢您提供的信息。我不知道固定位置的问题。
.popup {
    width:100%;
    height:100%;
    display:none;
    position:fixed;
    top:0px;
    left:0px;
    background:rgba(0,0,0,0.75);
}

@media print {
    body * {
        visibility: hidden;
      }
     .printable * {
        visibility: visible;
     }
     .popup {
         display: block;
     }
}

.popup:nth-of-type(2) {
  page-break-before: always;
  top: 100%;
}