盒子的相对定位（包含不脱离文档流的讲解，相对于原本位置偏移的实验讲解）

盒子的相对定位

不脱离文档流的解释
相对定位(position: relative)是指元素相对于其正常位置（即在文档流中的位置）进行定位。这意味着即使对元素进行了位置偏移，它在文档流中的位置仍然是保留的，不会影响到其他元素的布局。换句话说，相对定位的元素仍存在于文档流中，其他元素会像它没被定位过一样继续围绕着它。
相对于原本位置偏移的实验讲解
假设我们有两个盒子A和B，盒子A使用了相对定位并将top属性设为50px

<style>
  #boxA {
    position: relative;
    top: 50px;
    left: 20px;
    width: 100px;
    height: 100px;
    background-color: red;
  }

  #boxB {
    width: 100px;
    height: 100px;
    background-color: yellow;
  }
</style>

<div id="boxA">Box A</div>
<div id="boxB">Box B</div>

运行结果

在上述例子中，虽然盒子A向上偏移了50像素，但是盒子B并没有因此上移。这是因为盒子A在文档流中的位置仍然被保留，盒子B依然紧随其后。这种现象体现了相对定位的特点：即使改变了位置，但仍保留在文档流中，不影响兄弟元素的位置。
更详细的步骤解读
  1.初始化状态：在没有任何定位的情况下，所有元素都是按照文档流的顺序摆放的，盒子A位于盒子B之前。
  2.应用相对定位：当我们将position: relative应用于盒子A时，它开始根据指定的top和left值进行偏移。这里的top: 50px意味着盒子A将沿着垂直轴向上方移动50像素。
  3.观察影响：即便盒子A移动了，但由于它并未脱离文档流，所以在它下方的盒子B的位置并没有发生任何改变。盒子A所占的空间仍在文档流中保留。
这个实验充分展示了一个关键点：相对定位元素虽然可以改变自身的显示位置，但并不会对其周围的元素产生布局上的影响，这有助于创造精细微调的可能性而不破坏整体布局的连贯性。
总结
相对定位是布局设计中常用的技术之一，它能够在不扰乱文档流的前提下，对元素的显示位置做出细微调整。利用这一特点，开发者可以在保证页面布局稳定性的同时，灵活调整元素的外观位置，创造出既美观又实用的界面效果。