html 之 relative 和 absolute

当子元素或伪元素使用绝对定位（position: absolute）时，它会相对于最近的相对定位（relative）的父元素进行定位

relative

当你给父元素添加 relative 时
相对定位本身并不会影响元素的布局，它仍然会按照正常的文档流排列

作用

• 它成为子元素（例如伪元素）的定位参照点：当子元素或伪元素使用绝对定位（position: absolute）时，它会相对于最近的相对定位（relative）的父元素进行定位。如果父元素没有设置 relative，则子元素会相对于整个视口进行定位。
• 元素自身可以使用 top、left、right、bottom 进行偏移：如果你在元素上设置了 position: relative，它可以相对于它自己在正常文档流中的位置进行偏移。

absolute

当你给子（伪）元素添加 属性 position: absolute。绝对定位会使该伪元素脱离正常的文档流，并且它的定位会相对于最近的设置了定位属性（position: relative、absolute、fixed 等）的父元素。

作用

• 绝对定位的伪元素将不占据空间：因为伪元素不再参与正常的文档流，所以它不会对其他元素的布局产生影响。其他元素会像伪元素不存在一样进行布局。
• 通过 top、left、right、bottom 定位：使用绝对定位的伪元素可以通过这些属性精确定位在父元素的某个位置。例如，before:top-0 和 before:left-0 将伪元素放置在父元素的左上角。

总结

• 结合 relative 和 absolute 的工作原理
  当一个父元素使用 relative 定位，并且其子元素或伪元素使用 absolute 定位时，子元素会根据父元素的边界进行定位，而不是根据视口或文档流。这个模式非常常见，用于创建复杂的布局效果。