CSS定位：相对定位和绝对定位的区别(详解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;
}

在上述示例中，.relative-box元素是一个相对定位的容器，.absolute-box和.fixed-box元素都是相对于该容器进行定位的，.absolute-box元素向右和向下偏移了50px，而.fixed-box元素向右和向下分别偏移了50px，并且总是停留在浏览器的右下角。