CSS定位

定位流分类：
1、静态定位static
2、相对定位relative
3、绝对定位absolute
4、固定定位fixed
5、粘滞定位sticky

静态定位（ Static positioning）

position: static;

是所有元素的默认定位方式。意味着将一个元素定位在默认文档流中。

相对定位（ Relative positioning ）

position: relative;

相对定位就是相对于自己以前在标准流中的位置来移动。
使用top，right，bottom，left来控制

相对定位注意点：
- 相对定位是不脱离标准流的, 会继续在标准流中占用一份空间
- 在相对定位中同一个方向上的定位属性只能使用一个
- 由于相对定位是不脱离标准流的, 所以在相对定位中是区分块级元素/行内元素/行内块级元素
- 由于相对定位是不脱离标准流的, 并且相对定位的元素会占用标准流中的位置, 所以当给相对定位的元素设置margin/padding等属性的时会影响到标准流的布局

相对定位应用场景：

• 用于对元素进行微调
• 配合后面学习的绝对定位来使用

绝对定位（Absolute positioning）

position: absolute;

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

2.如果一个绝对定位的元素有祖先元素, 并且祖先元素也是定位流, 那么这个绝对定位的元素就会以定位流		的那个祖先元素作为参考点。
​	2.1只要是这个绝对定位元素的祖先元素都可以
​	2.2指的定位流是指绝对定位/相对定位/固定定位
​	2.3定位流中只有静态定位不行

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

简单来说，绝对定位会找离它最近的有定位的祖先元素作为参考，如果祖先元素没有定位，则以body作为参考。

绝对定位注意点：
1.绝对定位的元素是脱离标准流的
2.绝对定位的元素是不区分块级元素/行内元素/行内块级元素
3.如果一个绝对定位的元素是以body作为参考点, 那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点
4.一个绝对定位的元素会忽略祖先元素的padding

绝对定位——子绝父相
​ 相对定位弊端:
​ 相对定位不会脱离标准流, 会继续在标准流中占用一份空间, 所以不利于布局界面
​ 绝对定位弊端:
​ 默认情况下绝对定位的元素会以body作为参考点, 所以会随着浏览器的宽度高度的变化而变化
​ 子绝父相
​ 子元素用绝对定位, 父元素用相对定位

利用绝对定位实现水平居中：
​ 只需要设置绝对定位元素的left:50%;
​ 然后再设置绝对定位元素的 margin-left: -元素宽度的一半px;

固定定位（Fixed positioning）

position: fixed;

固定定位可以让某个盒子不随着滚动条的滚动而滚动。

注意点:
1.固定定位的元素是脱离标准流的, 不会占用标准流中的空间
2.固定定位和绝对定位一样不区分行内/块级/行内块级
3.固定定位是相对浏览器窗口位置进行定位的

粘滞定位（ Sticky positioning ）

position: sticky;

结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。

​ 元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

​ 设置了position: sticky的元素并不脱离文档流，仍然保留元素原本在文档流中的位置。

​ 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。

​ 亦即如果设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动（此时相当于fixed定位）。

​ 设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可

使用条件：
 - 父元素不能overflow:hidden或者overflow:auto属性。
 - 必须指定top、bottom、left、right4个值之一，否则只会处于相对定位
 - 父元素的高度不能低于sticky元素的高度
 - sticky元素仅在其父元素内生效（要给父元素设置）

z-index属性

定位之后的元素会存在层级关系，利用z-index属性可以改变元素层级。

​ 1.什么是z-index属性?
​ 默认情况下所有的元素都有一个默认的z-index属性, 取值是0.
​ z-index属性的作用是专门用于控制定位流元素的覆盖关系的

​ 2.默认情况下定位流的元素会盖住标准流的元素

​ 3.默认情况下定位流的元素后面编写的会盖住前面编写的

​ 4.如果定位流的元素设置了z-index属性, 那么谁的z-index属性比较大, 谁就会显示在上面

注意:
1.从父现象
​ 1.1如果两个元素的父元素都没有设置z-index属性, 那么谁的z-index属性比较大谁就显示在上面。
​ 1.2如果两个元素的父元素设置了z-index属性, 那么子元素的z-index属性就会失效, 也就是说谁的父元素的z-index属性比较大谁就会显示在上面。
2. z-index要用在定位元素上才能生效

总结

上面文字比较多，下面进行简单总结一下：
1、静态定位static：默认值
2、相对定位relative：相对元素当前位置进行定位，不脱离文档流
3、绝对定位absolute：相对最近有定位的祖先元素进行定位（如果都没有定位，则相对body进行定位），脱离文档流
4、固定定位fixed：相对浏览器视口进行定位，脱离文档流
5、粘滞定位sticky：relative + fixed，相对定位达到阈值就是固定定位，不脱离文档流

当元素移动到top=0的位置时，使用固定定位，固定在top=0的位置上
position: sticky;
top: 0;

6、z-index要用在定位元素上，谁的值大，谁在上方。