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

本文链接：https://blog.youkuaiyun.com/2301_79765198/article/details/142864855

盒子的相对定位

相对定位是CSS中的一种定位方式，通过相对定位，元素将进行相对于其正常位置的定位。使用相对定位时，元素仍然占据原来的空间，其他元素的布局不会被影响。

相对定位是相对于盒子自身的原始位置进行定位。通过设置top、right、bottom、left属性（其属性值可为负数），可以改变盒子的位置，但是其他元素不会受到影响。相对定位的元素在文档流中仍然占据原始位置。也就是说，在相对定位中，盒子并没有脱离文档流，它不会影响其他元素的布局，并且在正常文档流中保持其占据的空间，网页中的文档流机制的流水线排布方式还是存在。

盒子的定位是使用 position 属性来实现不同的定位方式，其参数为 static（静态定位）、 relative（相对定位）、 absolute（绝对定位）和 fixed（固定定位）；元素的位置通过 left 、top 、right 以及 bottom 属性进行规定

正常文档流网页中的排列方式

2号盒子分别相对于上边距和左边距偏移50px：

代码

 
<head>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: gray;
            border: 2px red solid;

           }
      
  
    </style>
</head>
<body>
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</body>

不脱离文档流的解释
相对定位(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>

由上可以看见，即使2号移动之后，它原来的位置始终保留着，3号并没有占据它的位置。（就好比图一1，2，3号盒子坐在自己位置上看表演，图二2号站起来去到旁边，但是它的椅子还是在原来的位置，没人能够移动和占据那把椅子），这就是保留在网页中的文档流的强大

练习

<head>
    <style>
        img{
            width: 100px;
            height: 100px;
 
        }
        #img1{
            width: 100px;
            height: 100px;
            border: 3px red solid;
        }
        #img2{
            width: 100px;
            height: 100px;
            border: 3px green solid;
            position: relative;
            top: 50px;
            left: -50px;
        }
        #img3{
            width: 100px;
            height: 100px;
            border: 3px blue solid;
        }
        div{
            width: 100px;
            height: 100px;
            border: 3px yellow solid;
        }
    </style>
</head>
<body>
    <img src="D:\图片\夏日饮品.jpg" alt="" id="img1">
    <img src="D:\图片\夏日饮品.jpg" alt="" id="img2">
    <img src="D:\图片\夏日饮品.jpg" alt="" id="img3">
    <br>
    <img src="D:\图片\夏日饮品.jpg" alt="">
    <img src="D:\图片\夏日饮品.jpg" alt="">
    <img src="D:\图片\夏日饮品.jpg" alt="">
    <div></div>
    <div></div>
    <div></div>
 
</body>