CSS中相对定位与绝对定位的区别及作用

场景复现

在学习前端开发的过程中，熟练掌握页面布局和定位是非常重要的，因此近期计划出一个专栏，详细讲述如何优雅高效地实现前端页面布局和渲染。包括css中的相对定位和绝对定位，好用的flex布局和grid布局，以及自适应宽高等等实用干货，文章从基础知识到项目实战，层层递进帮助学习前端技术。本期文章主要介绍的是CSS中的相对定位与绝对定位，包括相关用法和区别。

核心干货

定位的作用：实现某个元素可以自由地在一个盒子内移动位置，并且压住其他盒子。

相对定位

相对定位可以理解为“相对于”它的起点进行移动

语法：

选择器{
   
    position:relative;}

代码示例：👇👇👇👇
html部分：

<div class="box1"></div>
<div class="box2"></div>

css部分：

    .box1 {
   
   
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }
    .box2 {
   
   
      width: 200px;
      height: 200px;
      background-color: rgb(0, 203, 254);
    }

效果图：

此时我们为其中一个盒子添加相对定位👇👇
css部分：

    .box1 {
   
   
      /* 相对定位*/
      position: relative; 
      top: 50px;
      left: 50px;
      width: 200px;
      height: 200px;
      background-color: aquamarine;
    }

效果图：