绝对定位和相对定位的区别

绝对定位和相对定位都是css中的定位属性，它们的主要区别在于定位参照物的不同。绝对定位的参照物是离它最近的已定位的祖先元素，如果没有已定位祖先元素，则参照物是body元素。而相对定位的参照物是元素自身在文档流中的位置。

实例：

1. 绝对定位

HTML代码：

<div class="container">
    <div class="inner-box"></div>
</div>

CSS代码：

.container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.inner-box {
    position: absolute;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}

在这个例子中，我们设置了一个父级容器(container)和一个子级容器(inner-box)。其中父级容器使用relative定位，而子级容器使用绝对定位。我们将子级容器调整至父级容器的中央位置。

2. 相对定位

HTML代码：

<div class="container">
    <div class="inner-box"></div>
</div>

CSS代码：

.container {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}
.inner-box {
    position: relative;
    top: 50px;
    left: 50px;
    width: 100px;
    height: 100px;
    background-color: red;
}

这个例子与前一个例子非常相似，只是我们将子级容器(inner-box)的定位属性变为相对定位。相对定位的子级元素会相对于自身的初始位置进行偏移，而不是相对于离它最近的已定位祖先元素。在这个示例中，我们将子级容器相对于它的初始位置向下和向右移动了50px。

口诀：子绝父相
为了更好理解
转载哆啦nikoup主的视频

添加链接描述