1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>无标题文档</title> 4 <style type="text/css"> 5 * 6 { 7 margin:0px; 8 padding:0px;} 9 </style> 10 </head> 11 12 <body> 13 <div style="width:100px; height:100px; position:relative; top:0px; left:0px; background-color:#F00;"> 14 <div style="width:100px; height:100px; position:relative; top:50px; left:50px; background-color:#0F0;"> 15 <div style="width:100px; height:100px; position:relative; top:50px; left:50px; background-color:#C6C;"> 16 <div style="width:100px; height:100px; position:relative; top:50px; left:50px; background-color:#30C;"> 17 <div style="width:100px; height:100px; position:relative; top:50px; left:50px; background-color:#000;"> 18 </div> 19 </div> 20 </div> 21 </div> 22 </div> 23 <div style="width:100px; height:100px; position:relative; top:-50px; left:0px; background-color:#00F; z-index:5;"> 24 </div> 25 <div style="width:100px; height:100px; position:relative; top:-100px; left:50px; background-color:#FF0; z-index:4;"> 26 </div> 27 <div style="width:100px; height:100px; position:relative; top:-150px; left:100px; background-color:#6FC; z-index:3;"> 28 </div> 29 <div style="width:100px; height:100px; position:relative; top:-200px; left:150px; background-color:#F36; z-index:2;"> 30 </div> 31 <div style="width:100px; height:100px; position:relative; top:-250px; left:200px; background-color:#C00;"> 32 </div> 33 </body>
画格子小练习
原文：http://www.cnblogs.com/mazhijie/p/5518648.html