关于绝对定位与相对定位的区别和用法

Hello大家好，我们这次来详细说下关于绝对定位以及相对定位的知识。

1. 相对定位及其用法
   顾名思义相对定位的意思是相对于该控件相对于之前的位置进行偏。相对定位的css样式代码是这样的：position:relative;前面的单词代表了相对定位的属性，后面的单词代表了相对定位的属性值。倘若我们不设置定位类型，那么它的默认值是这样的：position:static;下面我们来举个例子：

css部分：

 .d1{
            height: 300;
            width: 300px;
            padding: 50px;
            border: 1px solid black;
            
        }

html部分：

<div class="d1">
        <div class="d2"></div>
    </div>

运行后我们会发现:黄色小方块距离边框有一段距离，这就假设了这个小方块相对于原文档流的位置，现在我们来看相对定位对它是怎样的影响，我们在css中加入以下相对布局代码：

.d2{
            width: 50px;
            height: 50px;
            background-color:yellow;
            position: relative;
            left: 20px;
        }

运行后我们会发现，黄色小方块相对于自己原来的位置向左偏移了20px，而不是相对与d1左边框进行的偏移，这就是相对定位。

3. 绝对定位及其用法
   绝对定位的意思是相对于该控件相对于整个浏览器的位置进行偏。绝对定位的css样式代码是这样的：position:absolute;前面的单词代表了绝对定位的属性，后面的单词代表了绝对定位的属性值。它还有另一个属性值：position: fixed;他俩的区别很简单：1、没有滚动条的情况下没有差异
   2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动，我们平常在浏览网页是那“挥之不去”的小广告就是用的这种定位。倘若我们不设置定位类型，那么它的默认值是这样的：position:static;
   下面我们来举个例子：

css部分：

 .d1{
            height: 300;
            width: 300px;
            padding: 50px;
            border: 1px solid black;
            
        }

html部分：

<div class="d1">
        <div class="d2"></div>
    </div>

运行后我们会发现:黄色小方块距离边框有一段距离，这就假设了这个小方块相对于原文档流的位置，现在我们来看绝对定位对它是怎样的影响，我们在css中加入以下代码：

.d2{
            width: 50px;
            height: 50px;
            background-color:yellow;
            position: absolute;
            left: 20px;
        }

运行后我们会发现，黄色小方块相对于自己原来的位置向左偏移了20px，而不是相对与d1左边框进行的偏移，这就是绝对定位。
5. 二者的区别
简单来说相对定位是根据自己原来的位置进行定位，绝对定位是根据整个浏览器进行定位，固定定位于绝对定位一样不过固定定位不随着屏幕的滚动而滚动。
6. 链接
如果上面的内容还是让你存有一些疑惑，那我们不如一起去看看官方的解答吧—>菜鸟教程。