CSS打印时如何将指定div移至纸张左上全宽，叠放于visibility隐藏元素上方

这个需求完全可实现，你现有代码出现的位置偏移、叠放异常问题，本质是两个逻辑疏漏导致的：

• 仅用visibility: hidden做全局隐藏时，被隐藏的元素不会移除文档流占位，哪怕清零了边距，元素本身的内容高度、嵌套结构依然会撑开打印页面，此时设置的top: 0实际指向的是所有隐形元素堆的顶端，而非打印纸张的物理左上角。
• #printableArea的绝对定位没有明确锚定参照系，如果它的任意祖先容器本身带有定位属性（比如通用模板里头部、侧边栏常见的position: relative吸顶设置），绝对定位就会以这个祖先容器为参照，而非打印页面的根边界，位置自然永远调不对。

针对上述问题调整后的打印媒体CSS如下，可直接替换原有规则：

@media only print {
    /* 锚定打印页根边界，作为绝对定位的固定参照 */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        position: relative;
        width: 100%;
    }

    /* 全局隐藏非打印元素，同时彻底清空其文档流占位 */
    * {
        visibility: hidden;
        margin: 0 !important;
        padding: 0 !important;
        /* 压缩隐藏元素占位到0，避免撑开页面结构 */
        max-height: 0 !important;
        overflow: hidden !important;
        border: none !important;
        font-size: 0 !important;
    }

    #printableArea {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 9999 !important;
        /* 加不透明白色背景，避免透出底层元素的残留渲染痕迹 */
        background: #fff !important;
        /* 恢复打印面板的正常尺寸渲染 */
        max-height: none !important;
        overflow: visible !important;
        font-size: inherit !important;
        border: inherit !important;
    }

    /* 恢复打印面板内所有子元素的可见性 */
    #printableArea * {
        visibility: visible;
    }
}

• 所有打印规则需要加!important覆盖，避免通用网页模板给头部、菜单、侧边栏等非打印元素预设的边距、定位样式干扰效果。
• 不建议把非打印元素直接设为display: none，否则如果#printableArea嵌套在其他容器内部，整个子树会被连带隐藏，原有基于visibility的可继承、可覆盖显示的优势也会失效。
• 打印场景下的z-index层级逻辑和屏幕端完全一致，只要定位参照系正确，带高层级的#printableArea会完全覆盖底层隐藏元素，不会出现层级错乱。

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