abspos-inline-007-ref.xht (1715B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>reference for abspos-inline-007</title> 5 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 6 <style type="text/css"> 7 .block-container { 8 font: 20px Ahem; 9 height: 20px; 10 position: relative; 11 top: -1px; 12 } 13 .inline-container { 14 position: relative; 15 border: 1px solid black; 16 display: inline-block; 17 } 18 .parent-block { 19 display: inline-block; 20 width: 30px; 21 height: 10px; 22 } 23 .abspos { 24 position: absolute; 25 width: 10px; 26 height: 10px; 27 background-color: green; 28 display: inline-block; 29 vertical-align: baseline; 30 } 31 .br { 32 right: 0; 33 bottom: 0; 34 } 35 .tl { 36 top: 0; 37 left: 0; 38 } 39 .filler { 40 display: inline-block; 41 width: 30px; 42 height: 10px; 43 } 44 45 </style> 46 </head> 47 <body> 48 <div class="block-container"> 49 x 50 <div class="inline-container"> 51 tl 52 <div class="abspos tl"></div> 53 <div class="parent-block"></div> 54 <div class="filler"></div> 55 </div>x 56 <div class="inline-container"> 57 br 58 <div class="abspos br"></div> 59 <div class="parent-block"></div> 60 <div class="filler"></div> 61 </div>x 62 <div class="inline-container"> 63 static 64 <div class="abspos" style="position:static"></div><div class="parent-block"></div> 65 <div class="filler" style="width: 20px;"></div> 66 </div> 67 </div> 68 <p>Tests abspos positioning of an Element that 1) has an inline containing 69 block, and 2) is not a child of the inline containing block, but a descendant.</p> 70 </body> 71 </html>