@media print div: How to solve overlapping page text on header?

Uhm I think your should use

position:relative

instead of

position:fixed

Something with position: fixed; never pushes static (or relative) content. Either there is styling to ensure they do not overlap... or they overlap.
See this example JSFiddle, which uses your css.

The problem lies somewhere else.
How does the header not overlap with the text in the first page? Do you have something pushing the text down? Margin-top? What?

Is it possible to share either the original or a simplified example? (You can use JSFiddle.)

Add this to your Header media rule: bottom:3em; modifying the 3em in order for the content to fit.

Then add a separate div selector to the rule for your content area:

div.printDivContent {
    position: relative;
    width: 100%;
    top:3em;   //match size of header
    left:0px;
    right:0px;
}

The CSS key "box-decoration-break" would help when set to "clone". See: CSS Fragmentation

You can create a container class around your content with a margin to top and bottom in the size of your header and footer and then set box-decoration-break to "clone" on this container.

#content {
    box-decoration-break: clone;
    margin-bottom: 90px;
 }