CSS之定位布局 -- position：relative/absolute/fixed/sticky

定位有哪些？区别和特点？

• 静态定位 static

特点：默认文档流定位 ---  position: static;

• 相对定位 relative

            特点：相对于自身在浏览器中的默认位置

            不脱离文档流   使用top,right,bottom,left来控制

注意点：

1. 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间

2. 在相对定位中同一个方向上的定位属性只能使用一个

3. 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素

4. 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位 的元素设置margin/padding等属性的时会影响到标准流的布局

• 绝对定位 absolute

   特点：

1.规律 ​ 默认情况下所有的绝对定位的元素, 无论有没有祖先元素, 都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流 的那个祖先元素作为参考点。 ​

2.1只要是这个绝对定位元素的祖先元素都可以 ​

2.2指的定位流是指绝对定位/相对定位/固定定位 ​

2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多个元素都是定位流, 那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

注意点： 

1. 绝对定