定位流：position
分类：1.相对定位：（relative）不脱离标准流，还会占空间配合，相对在标准流的位置运动（top，right同一个方向上只用一个属性等使(相对以前在标准流的位置来移动)（在相对定位中用margin和padding属性会影响整个网页布局）
应用场景：（1）用于对元素微调（2）配合绝对定位使用
2.绝对定位：（absolute）脱离标准流，默认相对于body中的位置运动，在标准流里行内和块级元素是会被区分的行内不能设置宽高，但在脱离标准流后就可以设置了，如定位流和浮动流；看把（absolute放在哪）如果放在你需要移动的盒子里那就直接相对body运动，如果放在它的父盒子里那就相对父盒子运动。放在它爷盒子里就相对爷盒子里；如果自己，父盒子，爷盒子都有绝对定位，则以最近的盒子做参考点（父盒子，爷盒子）（只有静态定位不满足）
重要注意：这里的body是指打开浏览器网页的那个窗口大小，用绝对定位盒子在左下角只是在窗口的最下角，不是真正的body,绝对定位会忽略父元素的padding 水平居中：（margin：0 auto；不适用于绝对定位）用百分比距离盒子的哪边永远是多少距离不会随着宽高而变化，永远距离整个宽度的百分之几
实现水平居中代码：left：50%；margin-left:-150px(这个长度是盒子本身长度的一般)容易理解
3.静态定位:默认情况在标准流中就是静态定位
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>定位流</title>
6 <style>
7 *{
8 margin: 0;
9 padding: 0;
10 }
11 div{
12 width: 200px;
13 height: 200px;
14 }
15 .box1{
16 position: relative;
17 background-color:red;
18 top: 20px;
19 }
20 .box2{
21 position: absolute;
22 right: 0px;
23 bottom: 0px;
24 background-color:green;
25 }
26 .box3{
27 background-color:yellow;
28 }
29 </style>
30 </head>
31 <body>
32 <div class="box1"></div>
33 <div class="box2"></div>
34 <div class="box3"></div>
35 </body>
36 </html>
只用相对定位不脱离标准流，对网页布局还是有影响的
只用绝对定位，位置会随窗口的宽高而变化
同时使用（子绝父相）：子盒子会以父盒子做参考点（企业开发中常用）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>子绝父相</title>
6 <style>
7 ul{
8 list-style: none;
9 width: 600px;
10 height: 50px;
11 margin: 0 auto;
12 margin-top: 100px;
13 background: grey;
14 line-height: 50px;
15 }
16 li{
17 float: left;
18 width: 100px;
19 height: 50px;
20 text-align: center;
21 }
22 .quan{
23 background: #cccccc;
24 position: relative;
25 }
26 img{
27 /*position: relative;*/
28 /*right: 16px;*/
29 /*top: -15px;*/
30 /*position: absolute;*/
31 /*right: 548px;*/
32 /*top: 100px;*/
33 position: absolute;
34 right: 0px;
35 top: 0;
36 }
37 </style>
38 </head>
39 <body>
40
41 <ul>
42 <li>服装</li>
43 <li>美妆</li>
44 <li>京东超市</li>
45 <li class="quan">
46 全球购
47 <img src="//m.360buyimg.com/babel/jfs/t14287/250/2085505084/2379/5a9b10c1/5a6a9058N36d84e8a.png" width="40px"></li>
48 <li>闪购</li>
49 <li>拍卖</li>
50 </ul>
51 </body>
52 </html>