page-container-011.xht (1960B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 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>