Suppose I have two repeating blocks on every page. One is on the top, the other will stretch from the top right corner to the right margin of the page. In my little illustration the first block is the red one, the second the blue. Now suppose, the red repeating header will be higher on the first page (as the top-margin of the page too), but the blue header will always be the same height. I don't want to cut the content of the blue header. So how can I make it appear on every page, starting in the top right corner and overflow the bottom line of that corner?
Forum › How do I...?
Make overflow of header/footer parts visible
Here is one way: flow an element to the @top-right-corner margin box, and give it an absolutely positioned child element that can extend outside the margin box:
<html>
<head>
<style>
@page {
@top-right-corner {
content: flow(bluebox);
vertical-align: top
}
}
</style>
</head>
<body>
<div style="flow: static(bluebox); position: relative">
<div style="position: absolute; background: blue; height: 6in">
this<br/>
is<br/>
a<br/>
tall<br/>
blue<br/>
box
</div>
</div>
</body>
</html>