How it renders / position: fixed
Why position: fixed behaves strangely in a PDF
Fixed positioning places an element relative to the viewport. A paged document has either one viewport per page or none, depending on the engine, so the element repeats on every page or appears once.
What it is for
Neither behaviour is a bug. The property means something specific about a scrolling viewport, and a paged document does not have one, so every engine has to pick an interpretation.
Support: Works in a browser-based render
Accepted and honoured, in the sense that something happens. What happens differs between engines, which makes it unsuitable for anything you need to be reliable.
The syntax
Written the way it would appear in a document stylesheet, using position: fixed as intended.
/* Instead of fixing to a viewport that does not exist, position within a
container you control. */
.page-section { position: relative; }
.watermark {
position: absolute;
inset: 0;
display: grid;
place-items: center;
font-size: 72pt;
color: rgba(0, 0, 0, 0.06);
transform: rotate(-30deg);
z-index: 0;
}
/* Anything that truly belongs to every page belongs in a header or footer
template, not in the document flow. */The mistake people make
position: sticky, which is the same problem with less ambiguity: without scrolling there is nothing for it to stick relative to, so it behaves as static.
Frequently asked
Does position: fixed work when generating a PDF?
Works in a browser-based render. Accepted and honoured, in the sense that something happens. What happens differs between engines, which makes it unsuitable for anything you need to be reliable.
How would I know if it were not working?
You would not, from the CSS. Unimplemented and unmatched CSS both fail silently, which is why the reliable test is to set a deliberately extreme value and see whether anything changes. If a 40mm margin looks the same as an 18mm one, the rule is not reaching the page.
Related properties
Things that come up in the same part of a document stylesheet.
How to force background colours to print
print-color-adjust. Works in a browser-based render.
Does @media print apply when generating a PDF
@media print. Works everywhere.
How to stop a PDF rendering in dark mode
prefers-color-scheme. Works everywhere.
Why images look blurry in the PDF
image-rendering. Works everywhere.
How to put a background or watermark on every PDF page
background on body. Works in a browser-based render.
Every property, with its support status
The full reference, grouped by what part of the page it touches.
Paste the CSS and see what the rendered page does with it.