阿基米德说“给我一个支点,我能翘起整个地球”，在HTML页面中，给你一个坐标，可以把任何一个元素定位目标点，这就是定位！CSS有三种基本的定位机制：相对定位、绝对定位、固定定位，决定定位的position属性的值有static默认标准流，当然这个就不用多说了；fixed固定定位，releative相对定位，absoulte绝对定位，结论如下:1.定位配合坐标点top bottom left right;2.相对定位相对于自身位置自增或者自减，坐标起点是原来所在位置;3.absolute绝对定位找最近的position属性，没有的话，就找父集进行定位。代码展示：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>position属性值4缺一带你了解相对还是绝对抑或是固定定位</title>
7 <style type="text/css">
8 div{
9 width: 200px;
10 height: 200px;
11 color: #fff;
12 }
13 .box1{
14 width: 120px;
15 height: 50px;
16 line-height: 50px;
17 background-color: darkviolet;
18 position: fixed;
19 bottom: 100px;
20 right: 50px;
21 text-align: center;
22 border-radius: 5px;
23 }
24 /* 固定定位,常见页面在线客服固定在某一个位置，怎么解决？ */
25 /*配合定位 top bottom left right坐标点分2组 top bottom / left right*/
26 /*bottom: 100px; 底部往上100px*/
27 .box2{
28 background-color: red;
29 /* position: relative;
30 left:200px;
31 top:30px; */
32 }
33 /*相对定位*//*相对于自身位置自增或者自减，坐标起点是原来所在位置*/
34 /*向元素的原始上侧位置增加30像素。*/
35 /*向元素的原始左侧位置增加200像素。*/
36 .box3{
37 background-color: chartreuse;
38 /* position: absolute;
39 top: 100px;
40 left: 100px; */
41 }
42 /*发现box3添加绝对定位后位置飘到box2上面去了,box4上来了，box3的参考坐标点是body*/
43
44 .box4{
45 background-color: crimson;
46 }
47 .box5{
48 /* bottom: 300px;
49 right: 400px;
50 position: fixed; */
51 margin:0 auto;
52 position: relative;
53 background-color: darkmagenta;
54 }
55 .box6{
56 width: 100px;
57 height: 100px;
58 background-color:blue;
59 position: absolute;
60 top: 100px;
61 left: 100px;
62 }
63 /*结论absolute绝对定位找最近的position属性，没有的话，就找父集*/
64 </style>
65 </head>
66 <body>
67 <!--情景一绝对定位在外面-->
68 <div class="box1">hello!固定定位</div>
69 <!-- br*100 回车快捷键 展示如下-->
70 <div class="box2"></div>
71 <div class="box3"></div>
72 <div class="box4"></div>
73
74 <!--情景二绝对定位在里面-->
75 <div class="box5">
76 <div class="box6">绝对定位</div>
77 </div>
78 </body>
79 </html>
来源：https://www.cnblogs.com/dhnblog/p/12314044.html