grid-placement-definite-001-ref.html (709B)
1 <!DOCTYPE HTML> 2 <html><head> 3 <meta charset="utf-8"> 4 <title></title> 5 <style type="text/css"> 6 7 .grid { 8 height: 60px; 9 border: 10px solid green; 10 position: relative; 11 font-size:12px; 12 } 13 14 span { 15 position: absolute; 16 background: lime; 17 border: 1px solid black; 18 box-sizing: border-box; 19 } 20 21 .a { 22 left: 40px; 23 width: 60px; 24 height: 40px; 25 } 26 .b { 27 left: 20px; 28 top: 40px; 29 width: 60px; 30 height: 20px; 31 } 32 .c { 33 left: 80px; 34 top: 40px; 35 width: 60px; 36 height: 20px; 37 } 38 .d { 39 left: 0px; 40 width: 20px; 41 height: 60px; 42 } 43 </style> 44 </head> 45 <body> 46 47 <div class=grid> 48 <span class="a">a</span> 49 <span class="b">b</span> 50 <span class="c">c</span> 51 <span class="d">d</span> 52 </div> 53 54 </body> 55 </html>