相對定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>Document</title>
8 <style>
9 .box1{
10 width: 200px;
11 height: 200px;
12 background-color: #bfa;
13
14 }
15 .box2{
16 width: 200px;
17 height: 200px;
18 background-color: tomato;
19 /* 定位(position)
20 -定位是一種更加高級的布局手段
21 -通過定位我們可以將元素擺放在頁面的任意位置
22 -使用position設置定位
23 可選值：
24 satatic 默認值 ：元素是靜止的 沒有開啟定位
25 relative 相對定位
26 absolute 絕對定位
27 fixed 固定定位
28 sticky 粘滯定位
29 -相對定位（相對定位是相對於其本身原來的位置進行定位）
30 -當元素的position設置為relative
31 -相對定位的特點：
32 1、開啟相對定位以后，如果不設置偏移量元素不會發生任何變化
33 2、相對定位是參照元素在文檔流中的位置進行定位的
34 3、相對定位會提升元素的層級
35 4、相對定位不會使元素脫離文檔流
36 6、相對定位不會改變元素的性質，塊還是塊，行內還是行內
37 偏移量(offset)
38 -當元素開啟了定位以后，可以通過偏移量來設置元素的位置
39 top
40 -定位元素和定位位置上邊的距離
41 bottom
42 -定位元素和定位位置下邊的距離
43
44 -定位元素垂直方向的位置由top和bottom兩個屬性來控制
45 通常情況下我們只會使用其中之一
46 -top值越大，定位元素越向下移動
47 -bottom值越大，定位元素越向上移動
48 left
49 -定位元素和定位位置左側的距離
50 right
51 -定位元素和定位位置右側的距離
52
53 -定位元素水平方向的位置由left和right兩個屬性確定
54 通常情況下只會使用一個
55 -left越大元素越靠右
56 -right越大元素越靠左
57 */
58 position: relative;
59 left: 200px;
60 top: -200px;
61
62 }
63 .box3{
64 width: 200px;
65 height: 200px;
66 background-color: greenyellow;
67
68 }
69 </style>
70 </head>
71 <body>
72 <div class="box1">1</div>
73 <div class="box2">2</div>
74 <div class="box3">3</div>
75 </body>
76 </html>
相對定位是相對於元素本身的原始位置進行定位
