1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3 <head>
4 <title>CSS Test: Paged Media: Relatively Positioned Pages</title>
5 <link rel="author" title="Melinda Grant" href="mailto:melinda.grant@hp.com">
6 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#comp-abspos">
7 <meta name="flags" content="paged">
8 <meta name="assert" content="When a relatively positioned element whose 'height' and 'width' match that of the page area has a corner positioned at a corner of the page area, any positioned children are positioned relative to the page area.">
9 <style type="text/css">
10
11 html, body, div.page {
12 height: 100%;
13 margin: 0;
14 padding: 0;
15 }
16 body {
17 background: #ffb;
18 }
19 div.page {
20 position: relative;
21 page-break-after: always;
22 top: 0;
23 }
24 div {
25 padding: 2em;
26 }
27 p {
28 background: blue;
29 position: absolute;
30 width: .5em;
31 height: .5em;
32 margin: 0;
33 }
34
35 p.bottom {
36 bottom: 0;
37 left: 0;
38 width: 100%;
39 }
40 p.right {
41 top: 0;
42 right: 0;
43 height: 100%;
44 }
45 p.left {
46 top: 0;
47 left: 0;
48 height: 100%;
49 }
50 p.top {
51 top: 0;
52 left: 0;
53 width: 100%;
54 }
55
56 </style>
57 </head>
58 <body>
59 <div class="page">
60 <div>
61 This test produces two pages on paged media.
62 </div>
63 <div>
64 This page has a light yellow background which is surrounded by a blue
65 border.
66 </div>
67 <p class="bottom"></p>
68 <p class="right"></p>
69 <p class="left"></p>
70 <p class="top"></p>
71 </div>
72 <div class="page">
73 <div>
74 This is at the top of the second page.
75 There is a horizontal blue bar near the bottom of this page.
76 </div>
77 <p class="bottom"></p>
78 </div>
79 </body>
80 </html>