CSS中父relative子absolute与子元素relative两种定位方式的区别是什么

首先先纠正一个常见认知误区：单独给子元素设置position: relative，根本不是基于父元素调整位置，它的定位基准是元素自身在正常文档流里的原始位置，两种写法的核心差异可以从三个维度区分：

• 定位基准不同
  第一种写法（子元素设position: relative）：

  #child{
    position: relative;
    left: 30px;  
  }
  

  这里的left: 30px是让子元素从自己本来该待的默认位置向右偏移30px，父元素哪怕没有任何定位属性，这个偏移也能生效。
  第二种写法（父元素设position: relative，子元素设position: absolute）：

  #parent{
    position: relative;
  }
  #child{
    position: absolute;
    left: 30px;
  }
  

  这里的left: 30px是让子元素从父元素的左边框内侧向右偏移30px，和子元素自身原来的默认位置没有任何关系，如果父元素没设relative定位，子元素就会往上找其他有非static定位的祖先元素，找不到就以整个视口为基准偏移。
• 文档流占位不同
  第一种写法的子元素不会脱离文档流，哪怕你把它偏移到其他位置，它原本在文档流里占的位置还会保留，周围其他元素不会挤占这个空位。
  第二种写法的子元素会完全脱离文档流，它原本占的位置会直接被释放，周围的元素会当它不存在，自动填充它原来的位置。
• 对父元素高度的影响不同
  第一种写法的子元素仍然属于父元素的内容，会参与父元素的高度计算，父元素如果没设固定高度，会被这个子元素撑开。
  第二种写法的子元素已经脱离文档流，不会参与父元素的高度计算，如果父元素没有其他内容，高度会直接变成0，不会被这个absolute的子元素撑开。

平时使用的场景也完全不一样：只是想微调某个元素的位置、不想打乱周围布局的时候用第一种；想把元素固定在父容器的某个指定位置（比如卡片右上角的关闭按钮、悬浮提示）的时候用第二种。

内容的提问来源于stack exchange，提问作者YESSS