The page header and page footer are assigned to margin box areas around the page.

Margin boxes are named according to their position around the page, as follows: @top-left-corner, @top-left, @top-center, @top-right, @top-right-corner, @left-top, @left-middle, @left-bottom, @right-top, @right-middle, @right-bottom, @bottom-left-corner, @bottom-left, @bottom-center, @bottom-right, and @bottom-right-corner.

Figure 8. Location of each margin box

@page {
  @top-right {        /* page header */
    content: "Sample";
  }
  @bottom-center {    /* page footer */
    content: counter(page);
  }
}