grid-placement-definite-003-ref.html (1059B)
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 </style> 63 </head> 64 <body> 65 66 <div class="grid test1"><span>a</span></div> 67 68 <div class="grid test2"> 69 <span class="a">a</span> 70 <span class="b">b</span> 71 <span class="c">c</span> 72 </div> 73 74 <div class="grid test3"><span>a</span></div> 75 76 <div class="grid test4"><span>a</span></div> 77 78 </body> 79 </html>