Position属性之relative用法-开发者知识库平台

Position属性之relative用法

Position

1285

2023/9/8 14:12:39

栏目: 编程语言

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

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

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

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

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

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

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

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

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

Position属性之relative用法