使用position: absolute仅显示在第一页，如何让印章元素显示在打印文档最后一页右下角？

问题原因 #

你用position: absolute时，元素是相对于整个文档流的根元素（html/body）定位的，而打印多页文档时，根元素的“底部”对应第一页的底部，所以印章只会出现在第一页。

解决方案一：调整父元素定位（简单直接） #

修改CSS，让印章相对于打印内容容器定位，确保它出现在最后一页底部：

@media print{
    #non-printable { 
        display: none; 
    }
    #printable { 
        display: block;
        position: relative; /* 设置为相对定位，作为印章的定位参照 */
        min-height: 100vh; /* 确保容器至少占满单页高度 */
    }
}
.stamp {
    position: absolute;
    right: 40px; /* 与@page的margin值一致，避免被页面边距截断 */
    bottom: 40px; /* 与@page的margin值一致 */
}
@page {
  size: A4;
  margin: 40px; 
}

HTML无需修改，因为.stamp已经放在#printable的最后位置，设置#printable为相对定位后，印章会自动对齐到整个打印内容的底部，也就是最后一页的右下角。

解决方案二：利用CSS分页伪类（精准控制最后一页） #

这种方法直接指定最后一页的右下角显示印章，不依赖元素在文档中的位置，兼容性更好：

@media print{
    #non-printable { 
        display: none; 
    }
    #printable { 
        display: block;
    }
    .stamp {
        position: fixed;
        visibility: hidden; /* 默认隐藏，只在最后一页显示 */
    }
    /* 针对最后一页的右下角区域设置内容 */
    @page:last {
        @bottom-right {
            content: element(stamp); /* 调用.stamp元素的内容 */
        }
    }
}
@page {
  size: A4;
  margin: 40px; 
}

注意事项 #

• 测试打印预览时，关闭浏览器打印设置中的“缩小内容以适应页面”选项，避免定位偏移
• 第一种方案需要确保.stamp是#printable的最后一个子元素，否则可能会被其他内容遮挡

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