12-1 定位(相对，绝对，固定)

一相对定位

如果仅仅对当前盒子设置相对定位，那么它与原来的盒子没有任何变化、

只有一个作用：父相子绝
不要使用相对定位来做压盖现象

二种现象：
1.不脱标
2.形影分离
实例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>相对定位</title>
 6     <style>
 7         div{
 8             width: 200px;
 9             height: 200px;
10         }
11         .box1{
12             background-color: red;
13         }
14         .box2{
15             background-color: black;
16             position: relative;
17             top: 200px;
18             left: 0px;
19         }
20         .box3{
21             background-color: yellow;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="box1"></div>
27 <div class="box2"></div>
28 <div class="box3"></div>
29 </body>
30 </html>

View Code