我们正常在码一个网页的时候，一般是文档流打底，大的布局调整用浮动，那么一些细微的调整就需要用到边距和定位了。
定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
通过position属性来设置元素的定位
可选值：
static： 默认值，元素没有开启定位
开启了定位：
relative： 开启元素的相对定位
absolute： 开启元素的绝对定位
fixed：开启元素的固定定位（也是绝对定位的一种）
sticky： 开启元素的粘滞定位
接下里我们来逐一看一下这几个属性值的语义
相对定位：
当元素的position属性设置为relative时，则开启了元素的相对定位 ==》自恋型
1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
2.相对定位是相对于元素在文档流中原来的位置进行定位（top:0;left:0;）
3.相对定位的元素不会脱离文档流
4.相对定位会使元素提升一个层级
5.相对定位不会改变元素的性质，块还是块，内联还是内联
偏移量
当开启了元素的定位（position属性值是一个非static的值）时，
可以通过left right top bottom四个属性来设置元素的偏移量，越大越向反方向移动
left：元素相对于其定位位置的左侧偏移量，
right：元素相对于其定位位置的右侧偏移量
top：元素相对于其定位位置的上边的偏移量
bottom：元素相对于其定位位置下边的偏移量
通常偏移量只需要使用两个就可以对一个元素进行定位，
一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
绝对定位
当position属性值设置为absolute时，则开启了元素的绝对定位
绝对定位：
1.开启绝对定位，会使元素脱离文档流
2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
3.绝对定位是相对于离他最近的包含块定位的
（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位 '父相子绝'）
4.绝对定位会使元素提升一个层级
5.绝对定位会改变元素的性质，开启BFC属性
内联元素可设宽高，块元素的宽度和高度默认都被内容撑开
包含块：containing block
-正常情况下：
离当前元素最近的祖先块元素
-定位情况下：
离他最近的开启了定位的祖先元素
如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
html （根元素，初始包含块）
固定定位
当元素的position属性设置fixed时，则开启了元素的固定定位
（1）用于固定在浏览器页面上，不随浏览器的滚动而改变位置；
（2）以浏览器为参照物，和父元素没有任何关系；
（3）固定定位不占有原来的位置，即脱离标准流 ,
一旦脱离文档流，就会改变元素的性质，就不再区分块元素、行内元素、行内块元素
(4)应用场景
- 固定导航
- 固定侧边栏
- 广告
粘滞定位 （一般用于页面导航的吸顶效果）
-当元素的position属性设置为sticky时，则开启了元素的粘滞定位
（1）以浏览器为参照物（体现固定定位特点）；
（2）元素不会脱离文档流，其性质也不会发生变化,占有原来位置（体现相对定位特点）；
（3）粘滞定位可以在元素到达某个位置时，将其固定
(4)没有达到top值之前正常显示，达到top值之后类似于固定定位，不会跟随滚动条滚动而滚动
还有一个需要注意的点（绝对定位元素布局）
水平布局
left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right+right
-当开启决定定位后，水平方向的布局等式就会加上left，right两个值
此时规则和之前一样，只是多添加了两个值
水平方向9个值相加，必须要等于其父元素内容区的宽度，如果不等于的话，浏览器就会进行调整
浏览器如何调整
100+0+0+0+100+0+0+0+right=400 right=200
-当发生过度约束时
1:如果9个值中没有auto，则自动调整right值以使等式满足
2:如果有auto，则自动调整auto的值以使等式满足
-可设置auto的值
margin width left right
四个值中，三个值固定，某一个值设为auto，则会调整这个auto值,
若width left right都为0，margin会均分四个方向值
—两个auto的情况
margin 和width为auto， 调整width
margin 和left，right其中一个值为auto， 调整left/right
width 和left，right其中一个值， 调整left/right
left，right都为auto 调整right
—三个auto的情况
margin width left ===> 调整left
margin width right ===> 调整right
width left right ===> 调整right
—四个值auto的情况
调整right
调整的顺序
right>left>width>margin
掌握两点：元素水平垂直居中两种写法
调整的顺序