CSS之相对定位和绝对定位

1. 相对定位   position: relative; 的元素相对于其正常位置进行定位。
   设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整。不会对其余内容进行调整来适应元素留下的任何空间。
2. 绝对定位   position: absolute; 的元素相对于最近的定位祖先元素进行定位（而不是相对于视口定位，如 fixed）。
   然而，如果绝对定位的元素没有祖先，它将使用文档主体（body），并随页面滚动一起移动。
   注意：“被定位的”元素是其位置除 static 以外的任何元素。

区别：相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。
四个普通的div盒子

代码如下：

<style>
        .div1 {
   
            height:100px;
            background-color: red;
        }
        .div2 {
   
            height:100px;
            background-color: green;
        }
        .div3 {
   
            height: