定位原理是通过改变元素的位置属性，实现对元素在正常文档流中位置的微调。当元素被设置为相对定位时，会相对于在正常文档流中的位置进行移动，相对定位就是通过使用top、right、bottom和left属性，可以对元素进行位置偏移，而这种偏移只会影响元素本身及其重叠的元素，不会影响其他元素的布局。相对定位不会改变元素的层叠顺序，元素仍然保持在正常文档流中的位置。

本教程操作系统：Windows10系统、Dell G3电脑。

相对定位是一种CSS定位方式，它允许我们相对于元素在正常文档流中的位置进行微调。相对定位的原理是通过改变元素的位置属性来实现。

在CSS中，元素的位置属性可以有多个值，其中包括static、relative、fixed和absolute。而相对定位就是通过将元素的位置属性设置为relative来实现的。

当元素被设置为相对定位时，它会相对于它在正常文档流中的位置进行移动。元素的移动是相对于它自身在正常文档流中的位置进行的，而不会影响其他元素的布局。

具体来说，相对定位的原理可以总结为以下几点：

元素的初始位置：当一个元素被设置为相对定位时，它的初始位置与它在正常文档流中的位置相。

位置偏移：通过使用top、right、bottom和left属性，我们可以对相对定位的元素进行位置偏移。这些属性允许我们指定元素相对于它在正常文档流中的位置的偏移量。，设置top为10px将使元素向下移动10个像素。

偏移的影响范：相对定位偏移只会影响元素本身以及其他重叠的素，不会影响其他元素的布局。这是相对定位与绝对定位的一个区别，绝对定位的偏移影响其他元素的布局。

元素的层叠顺序：相对定位不会改变元素的层叠顺序，元素仍然保持在正常文档流中的位置。如果元素需要改变层叠顺序，可以CSS属性z-index。

总结

相对定位的原理是通过改变元素的位置属性，实现对元素在正常文档流中位置的微调。通过使用top、right、bottom和left属性，可以对元素进行位置偏移，而这种偏移只会影响元素本身及其重叠的元素，不会影响其他元素的布局。相对定位不改变元素的层叠顺序，如果需要改变层叠顺序，可以使用z-index属性。