Skip to content
HomePagesHomePages template kit

rendered-no-fixed

"No `position: fixed` or `sticky` in a rendered class — both bind wrongly in the stacked print document."

Venue: check — No position: fixed or sticky in a rendered class — both bind wrongly in the stacked print document.

A rendered-class template’s CSS must not declare position: fixed or position: sticky. Every other positioning value — static, relative, absolute — is untouched.

Graded over the compiled stylesheet, so the fixed and sticky utilities are caught alongside hand-written declarations.

In a lone frame at capture geometry the window and the frame coincide, so fixed can look harmless — until the same section renders in the stacked print document, where every page of a document deliverable shares one window. There both values bind wrongly: a printed fixed element repeats at the same spot on every sheet, and sticky pins to the scrollport once, so a header appears on whichever page the stack was at and nowhere else. Both are coordinate systems with no relationship to the page the section is on.

The correction is almost always the one you meant anyway. “Pin this to the bottom of the frame” is absolute inside the frame or the section, and that box is exactly the one the artifact is cut to.

Position against the frame or the section instead: absolute inside a relative ancestor pins to the box you meant. To hold something at the foot of a page whose content varies, the stack’s own flex layout does it with no positioning at all — mt-auto on the last section pushes it down.

<footer className="fixed bottom-0 left-0 w-full"></footer>

Pinned to the capture window’s bottom edge, not the page’s.

return (
<Section id={nav.selfAnchor} className="relative">
<footer className="absolute inset-x-0 bottom-0"></footer>
</Section>
);

Pinned to the section’s own box, which is part of the artifact.

  • The CSS pipeline — the frame’s window and what the shell’s own box is.
  • Section — the section root’s contract inside the frame’s flex column.