CSS打印重复内容

Question

我一直在尝试为一个组件创建自定义样式，它需要打印，问题是我想打印的东西都是重复的。

我试着用codepen重新创建，但我不能。

这是我添加到css打印中的内容：

@media print and (color) {
  @page {
    margin: 5mm;
    size: A4 landscape;
  }

  * {
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #212121 !important;
    visibility: hidden;
  }
  html,
  body {
    margin: 0 !important;
    padding: 0 !important;
  }
  body,
  .section-to-print {
    height: auto !important;
  }
  .section-to-print,
  .section-to-print * {
    visibility: visible !important;
  }
  .section-to-print {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    display: block !important;
  }
  .section-to-print:nth-child(2) {
    display: none !important;
  }
  .vis-timeline {
    display: none;
  }
  core-dialog,
  .dialog-container {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
  }
}

Answer 1

原来问题是父元素有"position:fixed"，这就是我的问题中重复的原因。