1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 /* 8 相对定位特点 9 1.不会离文档流 占位 所有后面的元素不会往前跑 10 2.可以设置上下左右四个方位 11 如果同的设置了top和bottom值只有top起作用 12 如果同时设置了1et和right值只有1eft起作用 13 3.参照物:自已本身 14 4.可以设置zinde属性z-ine越大越在上 15 z-index必须要和定位元素(绝对,相利,固定)同时使用才起作用 16 */ 17 .red{ 18 width: 300px; 19 height: 300px; 20 background-color: red 21 } 22 .green{ 23 width: 200px; 24 height: 200px; 25 background-color: green; 26 27 position: relative; 28 left: 50px; 29 top: 50px; 30 z-index: 10; 31 } 32 .blue{ 33 width: 100px; 34 height: 100px; 35 background-color: blue; 36 position: relative; 37 z-index: 11; 38 } 39 </style> 40 </head> 41 <body> 42 <div class="red"> 43 <div class="green"></div> 44 <div class="blue"></div> 45 </div> 46 </body> 47 </html>