碎碎念：CSS三大定位——固定、相对、绝对定位

三大定位

• position:fixed 固定定位
• position:relative 相对定位
• position:absolute 绝对定位
  ⚠️：使用定位时，一定要配合定位的坐标来使用，left、right、bottom、top表示固定元素距离某边多远

固定定位

• position：fixed ：固定定位，是相对于浏览器窗口来进行定位的，不论页面是否滚动，如何滚动，固定定位元素实现的位置不会发生改变。
• 特点：
  • 它脱离了标准文档流
  • 它的层级比标准文档流里面的元素，所以固定定位元素他会压盖住标准文档流里面的元素
  • 它不会再占用空间
  • 它实现的位置不会随着浏览器的滚动而改变

相对定位

• position-relative：相对定位，是相对于自身的位置进行定位的，不论是否进行位置移动，实际上都占用着原来的位置。
• 特点：
  • 它没有脱离标准文档流
  • 它如果没有设置定位的坐标，那么它会在老家留下一个坑
  • 它设置了定位的坐标以后，那么它会将标准文档流中的元素压盖住
  • 它的定位坐标值可以是负数
• ⚠️：相对定位元素会在老家留下一个坑，一般情况很少单独使用，相对定位元素主要是配合“绝对定位”一开始用的

绝对定位

• position-absolute：绝对定位，在没有规定left和top的位置时，是相对于其父元素的左上角定位的(不包含padding的区域)
• 特点：
  • 它脱离了标准文档流
  • 它不再占用空间
  • 定位元素会压盖住标准文档流中的元素，所以会覆盖上一个元素
  • 当前上一级（父级）设置了定位，则绝对定位会以当前定位为参照物，若当前上一级未设置定位，则以当前的祖先级为参照物，若祖先级及祖先级的上一级都未设置，则以 浏览器 作为参照物进行绝对定位。