CSS定位：相對定位和絕對定位的區別

一、CSS絕對定位與相對定位的區別

1、絕對定位和相對定位都可以控制元素在頁面上的位置，但二者的定位方式和影響範圍有所不同。

2、相對定位是相對於元素本身所在位置來進行定位，可以通過top、bottom、left、right屬性的設定來控制元素所在位置的偏移量，影響僅限於該元素所在的文本流中。

.box {
  position: relative; /*相對定位*/
  top: 20px;
  left: 50px;
}

3、絕對定位是相對於距離自身最近的已定位的祖先元素，如果不存在已定位的祖先元素，則相對於文檔的body元素來進行定位。可以通過top、bottom、left、right屬性的設定來控制元素所在位置的偏移量，影響範圍比相對定位更廣泛。

.box {
  position: absolute; /*絕對定位*/
  top: 20px;
  left: 50px;
}

二、相對定位、絕對定位和固定定位的區別

1、固定定位是指元素相對於瀏覽器視窗的位置進行定位，不會隨着滾動條的滾動而變化。

.box {
  position: fixed; /*固定定位*/
  top: 20px;
  left: 50px;
}

2、相對定位、絕對定位和固定定位在使用時需要注意以下幾點差異：

3、相對定位是相對於元素本身所在位置來進行定位，而絕對定位和固定定位是相對於祖先元素和瀏覽器視窗來進行定位，所以在使用時需要對祖先元素和瀏覽器視窗的大小進行適當的考慮。

.relative-box {
  position: relative;
  width: 400px;
  height: 300px;
}

.absolute-box {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
}

.fixed-box {
  position: fixed;
  width: 200px;
  height: 200px;
  bottom: 50px;
  right: 50px;
}

4、另外，相對定位、絕對定位和固定定位在文檔流中的位置也有所不同，相對定位不會改變元素在文檔流中的位置，但是絕對定位和固定定位會將元素從文檔流中拖出來，可能會對其他元素造成影響，需要進行一定的頁面布局規劃。

三、使用示例

.relative-box {
  position: relative;
  width: 400px;
  height: 300px;
}

.absolute-box {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50px;
  left: 50px;
}

.fixed-box {
  position: fixed;
  width: 200px;
  height: 200px;
  bottom: 50px;
  right: 50px;
}