How to declare a div in @page @top-left

Question

How do I declare that a DIV should be displayed in top-left corner of every page and not in its relative position.

I have a div like:

<div id=header>Document</div>

and I would like to display it on every page in top left corner using css like:

@page {
    size: 8.5in 11in;
    margin: 0.25in;
    border: thin solid black;
    padding: 1em;


     @top-left {
        content: ???? ;
      }
}

Thank you.

Answer 1

I realise that this question is a bit old, but for anyone like me who comes here searching for a way to do this, it is possible using CSS3 running elements: http://www.w3.org/TR/2007/WD-css3-gcpm-20070504/#running1

In this example, the header is hidden from view in all media types except print. On printed pages, the header is displayed top center on all pages, except where h1 elements appear.

<style>
  div.header { display: none }
  @media print {
  div.header {
    display: block;
    position: running(header);
  }
  @page { @top-center { content: element(header, last-except) }}
</style>
...
<div class="header">Introduction</div>

<h1 class="chapter">An introduction</div>

Answer 2

Doesn't

#header {
   position: fixed;
   top: 0;
   left: 0;
}

work? See Printing Headers. Also, have a look at the W3C specification of position: fixed.

EDIT: if I read the CSS 3 specs concerning Margin Boxes well enough, together with the CSS 2.1 specs about the content property, I don't think you can embed a <div> from your page into the contents of a Margin Box, alas.