position的值，以及absolute和relative的区别

在 CSS 中，元素的 position 属性有五种取值：

static：默认值，元素按照正常的流动方式排列。

relative：元素的位置相对于它在正常流中的位置进行定位。

absolute：元素的位置相对于最近的已定位父元素进行定位，如果元素没有已定位的父元素，那么它的位置相对于 initial containing block 进行定位。

fixed：元素的位置相对于浏览器窗口进行定位，即使页面滚动，元素也会保持在固定的位置。

sticky：元素的位置在正常流中的位置，但是当页面滚动到一定程度时，元素会被固定在页面的某个位置。

关于 relative 和 absolute 的区别，主要是它们的定位参照点不同。relative 元素的定位参照点是它在正常流中的位置，而 absolute 元素的定位参照点是最近的已定位父元素（如果没有已定位的父元素，则参照点是 initial containing block）。此外，absolute 元素会脱离正常文档流，而 relative 元素不会。

例如，如果一个 div 的 position 设为 absolute，并设置了 left、top、right 或 bottom 属性，那么 div 会脱离正常文档流，并相对于它的最近已定位父元素进行定位。如果 div 没有已定位的父元素，那么它会相对于 initial containing block 进行定位。例如：

div {
  position: absolute;
  left: 10px;
  top: 20px;
}

这样，div 会相对于它的最近已定位父元素向左移动 10px，向上移动 20px。

如果将 div 的 position 设为 relative，并设置了 left、top、right 或 bottom 属性，那么 div 不会脱离正常文档流，它的位置相对于它在正常流中的位置进行定位。例如：

div {
  position: relative;
  left: 10px;
  top: 20px;
}

这样，div 不会脱离正常文档流，它会相对于它在正常流中的位置向左移动 10px，向上移动 20px。