css position定位

定位是可以将元素摆放到页面中的任意位置

pisition的默认值是static，没有开启定位

position:relative 相对定位

position: absolute，绝对定位

position: fixed 固定定位

position: sticky 粘滞定位

1 相对定位

（不脱离文档流，是块元素还是块元素，行内元素还是行内元素。但是图层显示层级有提升。设置偏移量以后，相对于自己原来的位置定位）

（1）开启相对定位

position: relative

开启了以后还是没有效果，因为要设置偏移量，才会有改变。

开启相对定位不会脱离文档流，因为下面的元素没有往上挤；也不会改变元素的性质，如果脱离文档流之后，块元素不再独占一行，宽高都被内容撑开，行内元素会变成块元素，相对定位不会改变元素的性质，是块元素还是独占一行，是行内元素也是行内元素。

(2)开启定位之后，设置偏移量。

top:100px。 相对于原来位置，往下移动100px. 也就是上面有一段100px的距离

left:100px  相对于原来位置，往右移动100px，也就是左边有一段100px的距离。

(3)虽然相对定位把元素移走了，但是原来的位置还占着，没有脱离文档流，不过图层提升了。

适合场景:简单的微小定位。 移动一点点。 因为如果移动很多，原来的位置都会空出来。

例如:购物车图标 

使用相对定位之后，原来占多少位置，还是占多少位置，不会把别的内容撑开，不会有改变。

不过会盖住原来的东西，会提升元素的层级

2 绝对定位

（脱离文档流，不设置偏移量位置不变，设置了偏移量之后，不相对于自己原来的位置定位，而是相对于开启了相对定位的父元素。）

（1）开启绝对定位

position: absolute；

开启以后立马脱离了文档流，文档流中下面的元素会挤上去，虽然脱离了文档流，但是没有设置偏

移量的话，元素的位置不会发生改变，所以这个开启绝对定位的元素会挡住文档流挤上来的元素。

-----意思就是，虽然脱离了文档流，但是位置没有改变。

元素性质发生了变化，不再独占一行了，宽高都会被内容撑开。

比如如果有字的话，就被字撑开。如果没有字，同时没有设置宽度，那就没有东西。

（2）设置偏移量以后，是相对于开启了相对定位的父元素定位的。

为什么要给父元素开启相对定位，因为相对定位开启了以后，会开启定位，但不会对这个父元素产生影响。只要不给这个父元素设置偏移量，跟不开启定位一样，这个父元素还是在文档流中。

当然，开启fixed,sticky这些也是开启了定位。不一定非得是relative