css定位解析

目前flex可以说是独霸一方，相当的好用
但他有一个致命的弱点，那就是不兼容低版本IE
而定位在能兼容IE的css语法中属于相当好用的一种，目前共有四种定位方式

1 相对定位

position:relative;
top:0;
bottom:20px;
left:30px;
right:0;

定义:会更加当前位置向指定方向发生偏移，但会将自己本体留在原来的位置。
个人觉得他这个将本体留在原地的特性真的是非常无语，在很多情况下使用相对定位只是为了配合绝对定位

2 绝对定位

position:absolute;
top:0;
bottom:20px;
left:30px;
right:0;

定义:自身脱离dom树，不再与其他元素发生关系，出发点定位为最近设置了relative祖先元素的左上角(超好用)，如果没用则从body的左上角作为定位出发点。
绝对定位的用途还是非常多的
还有一个用绝对定位实现上下左右居中效果

position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;

3 固定定位

position:fixed;
top:0;
bottom:20px;
left:30px;
right:0;

定义:出发点从body的左上角开始，不会受到页面滚动的影响
应用场景还是不少的，特别是漂浮广告之类的
4 吸附定位

position:sticky;
top:0;

定义:现在设置top:0会，开始会看不出效果 但当设置了吸附布局的元素被滚动超出页面顶部是他就会像固定定位一样定在页面顶部，当下滚时他又会回复成无定位状态
有兼容问题 跟多人会现在用js操作元素relative 和 fixed 以达到吸附布局的效果 毕竟兼容不是小问题