grid-placement-definite-002-ref.html (1458B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 html,body { 7 font-size:12px; 8 font-family:monospace; 9 } 10 .grid { 11 height: 60px; 12 border: 1px solid green; 13 position: relative; 14 } 15 16 span { 17 position: absolute; 18 background: lime; 19 border: 1px solid black; 20 box-sizing: border-box; 21 } 22 23 .test1 span { 24 top: 0; 25 left: 40px; 26 width: 100px; 27 height: 20px; 28 } 29 30 .test2 .a { 31 top: 0; 32 left: 0; 33 width: 60px; 34 height: 40px; 35 } 36 .test2 .b { 37 top: 40px; 38 left: 20px; 39 width: 60px; 40 height: 20px; 41 } 42 .test2 .c { 43 top: 0; 44 left: 60px; 45 width: 60px; 46 height: 20px; 47 } 48 49 .test3 span { 50 top: 0; 51 left: 40px; 52 width: 100px; 53 height: 20px; 54 } 55 56 .test4 span { 57 top: 0; 58 left: 40px; 59 width: 100px; 60 height: 20px; 61 } 62 63 .test5 span { 64 top: 0; 65 left: 20px; 66 width: 120px; 67 height: 20px; 68 } 69 70 .test6 span { 71 top: 0; 72 left: 0; 73 width: 20px; 74 height: 20px; 75 } 76 77 .test7 span { 78 top: 0; 79 left: 0; 80 width: 700px; 81 height: 60px; 82 padding:3px; 83 } 84 85 </style> 86 </head> 87 <body> 88 89 <div class="grid test1"><span>a</span></div> 90 91 <div class="grid test2"> 92 <span class="a">a</span> 93 <span class="b">b</span> 94 <span class="c">c</span> 95 </div> 96 97 <div class="grid test3"><span>a</span></div> 98 99 <div class="grid test4"><span>a</span></div> 100 101 <div class="grid test5"><span>a</span></div> 102 103 <div class="grid test6"><span>b</span></div> 104 105 <div class="grid test7"><span> grid</span></div> 106 107 </body> 108 </html>