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>