position:relative解释代码

position:relative是CSS中的一个定位属性，它可以用来相对于元素在正常文档流中的位置进行定位。当给一个元素设置position:relative时，它仍然占据着文档流中的位置，但是可以通过top、right、bottom和left属性来调整它相对于原始位置的偏移量。

下面是一个示例代码的解释：

<style>
    .box {
        position: relative;
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .inner-box {
        position: relative;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>

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

在上面的代码中，我们有一个父元素`.box`和一个子元素`.inner-box`。父元素`.box`设置了`position:relative`，子元素`.inner-box`也设置了`position:relative`，并且通过`top`和`left`属性分别向下和向右偏移了50个像素。

这样，子元素`.inner-box`相对于父元素`.box`的原始位置向下和向右偏移了50个像素，最终的效果是子元素`.inner-box`相对于父元素`.box`的左上角位置向下和向右偏移了50个像素。