I have a document which has a sidebar in the bottom of the source order.
The document is two pages long (dynamically generated), and when I position the sidebar

#sidebar {position: absolute; top: 0; right: 0;}

it positions on the second page.

The pages are not "named" because the page break is not in a consistent place.

How can I target the first page for the position of the sidebar?

My ideal code:

#sidebar{
  position: absolute;
  top: 0;
  right: 0;
  page: page:first;
}

Can you move the sidebar to the top of the document, either by editing the source document or by running some JavaScript to move it?

I'm trying to avoid touching the source, as it's a legacy system that is deployed across many sites.

If I can do it in CSS, that would be ideal.

I was just trying to set the pagename for the whole document, then target that in #sidebar, but it just makes the sidebar pulled out after the rest of the content.

Yes, specifying a named page doesn't move the content to the page, it creates the page at that place where the content appears.

You could flow it to a margin box using the "start" modifier, instead of using absolute positioning. Or the JavaScript option. But there is no pure CSS way to move an absolute positioned block to the first page.

Ok, thanks Mike.

I'll keep exploring.

Hi, I have a similar situation, where I have a disclaimer box to be in bottom of the first page of a table of contents container. That is possible using only CSS? Using Javascript option what it involves?

Thanks in advance

You can apply "float: bottom" to the disclaimer box to move it to the bottom of the current page.

Hi Mike, thanks, I'll try that