定位
在CSS里面造成元素脱流我们有两种方式，第一种是之前学过的浮动float,而剩下的一种则是我们的position定位
定位可以看成是脱流里面的特殊盒子模型，它解决了之前标准盒子模型里面的一些问题
position的本意是在元素脱流以后再去调整元素的位置
CSS里面的定位有五种方式，分别是
- 相对定位
- 绝对定位
- 固定定位
- 粘性定位
- 静态定位
当一个元素一旦使用了定位position以后，就会多出5个属性值出来，left/right/top/bottom可以X轴与Y轴的位置。
当一个元素一旦使用了定位position以后，就会高于普通文档流一个Z轴层级，可以通过z-index去调整这个Z轴的层级，它的默认值是0
相对定位
相对定位是元素相对于自己原来的位置再进行定位，它使用的属性值是relative，它通过left/right/top/bottom调整了自己的位置以后，仍然占用原来的位置
相对定位没有脱流，所以不具备脱流的特点
position: relative;
left: 50px;
top: 60px;
绝对定位
绝对定位使用的属性值是absolute，它会在当前的位置直接脱流，要遵守脱流的影响。
绝对定位默认以浏览器为标准进行定位，如果外层发现了其它的定位，则以这个元素为标准进行定位
position:absolute;
left:20px;
top:0px;
固定定位
固定定位使用的属性值是fixed，它在当前位置直接脱流，要遵守脱流的影响
固定定位一定是以浏览器为标准进行定位，任何定位都不能把我拦下来，并且不会随着页面的滚动条的滚动而变化
position:fixed;
静态定位
静态定位相当于清除了之前的定位，它使用static属性值
position:static;
当它使用了这个属性值以后，之前的定位效果也就会全部清除掉，元素也会回归到正常的文档流当中去
粘性定位
- 当它的位置让它可以正常呈现的时候，它的定位等同于
position: static，随着正常的文档流滚动 - 当它的位置不足以让它正常显示，但它的父元素有足够多让它显示的空间，它的定位等同于
position: fixed - 当它的父元素的空间不够让它显示，它的定位等同于
position:absolute
粘性定位使用的属性值是sticky，它没有脱流，它也可以通过left/right/top/bottom来设置定位
关于子绝父相
当页面上面的一元素要以另一个元素为标准进行位置设置的时候，我们就要使用“子绝父相”这种布局概念（本意上面指的是子级元素使用了绝对定位以后，父级元素要使用相对定位来进行完成，这样就可以约束里面的绝对定位）。但是这里要注意，它只是一种概念，并不是规范。外层的元素除了relative以外，还可以使用absolute或fixed也可以把它拉回来
脱流的影响
目前造成脱流的方试有浮动与定位，一个元素脱流以后会有如下的影响
-
脱流的元素不在占用原来的位置，会造成父级元素的高度坍塌
-
脱流的元素高于标准文档流一个Z轴层级，在定位脱流里面还可以使用
z-index调整Z轴等级 -
脱流以后的元素无视元素类型，通通都会变成
block块级元素状态 -
脱流以后的元素会照成宽度丢失，宽度不再是默认是100%，而是由里面的内容去撑开（但是仍然可以通过
width重新设置宽度） -
脱流以后的元素会形成
BFC（也就是说脱流以后的元素没有margin的折叠与穿透现象） -
脱流以后的元素不再适用于标准流布局里面的任何居中规范
-
定位脱流以后的元素可以通过
left/right来拉开宽度，可以通过top/bottom来拉开高度【这一种特点经常会用在布局切割里面】
评论区