Position属性之relative用法

Position属性的relative值表示元素的位置相对于其正常位置进行偏移。它会根据元素的原始位置在文档流中进行相对的移动，但不会影响其他元素的布局。

相对定位的元素会保留其原始的空间占用，也就是说，其他元素不会填充相对定位元素的空间。

下面是一些相对定位常用的用法：

1. 偏移属性（top, right, bottom, left）：通过调整top, right, bottom和left属性的值，可以将元素相对于其正常位置进行上、右、下或左偏移。

.position-relative {
position: relative;
top: 10px;
left: 20px;
}

2. 层叠顺序（z-index）：通过设置z-index属性的值，可以控制元素在堆叠上下文中的显示顺序。具有较高z-index值的元素将覆盖具有较低z-index值的元素。

.position-relative {
position: relative;
z-index: 1;
}

3. 与绝对定位结合使用：相对定位的元素可以作为绝对定位元素的容器。通过使用相对定位来创建一个新的块级格式上下文，可以在绝对定位元素内部进行定位。

.position-relative {
position: relative;
}
.position-absolute {
position: absolute;
top: 0;
left: 0;
}

请注意，相对定位不会将元素从文档流中移除，也不会改变其在文档流中的位置。它只是相对于其原始位置进行调整。