区别有：1、定位基准，相对定位的元素相对于其原始位置进行定位，绝对定位的元素相对于其最近的定位父元素进行定位；2、边距和填充，元素的边距和填充会影响相对定位的元素，元素的边距和填充不会影响绝对定位的元素；3、z索引，元素的z索引不会影响相对定位的元素，元素的z索引会影响绝对定位的元素。
本教程操作系统：Windows10系统、Dell G3电脑。
相对定位和绝对定位都是 CSS 中的定位方式，它们都允许您将元素从其默认位置移动到不同的位置。但是，它们之间存在一些关键区别：
相对定位
* 相对定位的元素相对于其原始位置进行定位。
* 元素的边距和填充会影响相对定位的元素。
* 元素的 z 索引不会影响相对定位的元素。
绝对定位
* 绝对定位的元素相对于其最近的定位父元素进行定位。
* 元素的边距和填充不会影响绝对定位的元素。
* 元素的 z 索引会影响绝对定位的元素。
以下是相对定位和绝对定位的具体区别：
| 属性 | 相对定位 | 绝对定位 |
|---|---|---|
| 定位基准 | 元素的原始位置 | 元素最近的定位父元素 |
| 边距和填充 | 会影响元素的位置 | 不会影响元素的位置 |
| z 索引 | 不会影响元素的位置 | 会影响元素的位置 |
| 元素的大小 | 不会影响元素的位置 | 会影响元素的位置 |
| 元素的背景 | 不会影响元素的位置 | 会影响元素的位置 |
| 元素的阴影 | 不会影响元素的位置 | 会影响元素的位置 |
相对定位示例
这是一个相对定位的元素。它相对于其原始位置向右移动了 100 像素。
.container {
width: 1000px;
height: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
position: relative;
left: 100px;
}这段代码将创建一个包含一个相对定位元素的容器。相对定位元素将向右移动 100 像素。
绝对定位示例
这是一个绝对定位的元素。它相对于其最近的定位父元素向下移动了 100 像素。
.container {
width: 1000px;
height: 100px;
}
.box {
width: 200px;
height: 50px;
background-color: red;
position: absolute;
bottom: 100px;
}这段代码将创建一个包含一个绝对定位元素的容器。绝对定位元素将向下移动 100 像素。
在实际使用中，您可以根据需要选择相对定位或绝对定位。如果您只需要将元素从其默认位置移动到不同的位置，相对定位是一个不错的选择。如果您需要将元素定位到特定的位置，绝对定位是一个更好的选择。
