1秒搞懂absolute和relative在css中的作用 - Understand the concept of the absolute and relative position

完全理解absolute 和 relative，再也不用背概念

理解absolute和relative能更高效的在前端开发的过程中对页面的元素进行定位。查阅了很多网上的资料，都没有很好的介绍它们的玩法。下面这篇文章将介绍absolute和relative的概念知识，以及用法。帮助快速理解他们的作用。

1.Document flow(文件流)

首先，要先了解什么是文件流，文件流可以理解为所有的元素占有自己的空间，有自己的位置和顺序，排列在一个页面上。
每一个网页可以看作是一个文件流，里面的元素都有自己的排列方式.

2. Absolute positioning(绝对定位)

元素根据它最近的以定位的父元素，进行定位。
元素定位移动后，脱离文件流（如下图所示），原来的元素占有空间不存在，所以页面布局就会改变.

1）示例，四个同级元素的absolute定位

请添加图片描述
在示例中有四个同等大小的元素默认static排列在一个页面。

<div class=”parent”>
 <div class=”box” id=”one”>One</div>
 <div class=”box” id=”two”>Two</div>
 <div class=”box” id=”three”>Three</div>
 <div class=”box” id=”four”>Four</div>
</div>

请添加图片描述
改变two的位置为absolute，此时以定位的body元素移动top 20, left 20。

#two {
  top: 20px;
  left: 20px;
  background: green;
  position: absolute;
}

2）示例，以四个不同级的元素的absolute定位.

请添加图片描述
四个元素互相嵌套，中心排列在页面中.

<body>
    <div class="box-1">box-1
        <div class="box-2">box-2
            <div class="box-3">box-3
                <div class="box-4">box-4
                </div>
            </div>
        </div>
    </div>
</body>

改变box 4的定位为top 10px, left 10 px. 此时box 4 以定位的body为父元素定位, box1,box2,box3的定位都是unset，所以box4的最近父元素为body.

body {
  background-color: rgb(87, 124, 124);
}
.box-1 {
    margin: 0 auto;
    background-color: aquamarine;
    width: 400px;
    height: 400px; 
    text-align: left;
}
.box-2 {
    background-color: #ffff00;
    width: 300px;
    height: 300px; 
}
.box-3 {
    background-color: palevioletred;
    width: 200px;
    height: 200px; 
}
.box-1, .box-2, .box-3, .box-4{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-4 {
    background-color: purple;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 10px;
    position: absolute;
}

请添加图片描述

2）示例，以四个不同级的元素的absolute定位.

将box3增加absolute定位特性, 不设置移动top, left, right, bottom 参数，所以默认都为0. 所以在这个示例中box3 是box4的最近父元素而不是body.

body {
  background-color: rgb(87, 124, 124);
}
.box-1 {
    margin: 0 auto;
    background-color: aquamarine;
    width: 400px;
    height: 400px; 
    text-align: left;
}
.box-2 {
    background-color: #ffff00;
    width: 300px;
    height: 300px; 
}
.box-3 {
    background-color: palevioletred;
    width: 200px;
    height: 200px; 
    position: absolute;
}
.box-1, .box-2, .box-3, .box-4{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-4 {
    background-color: purple;
    width: 100px;
    height: 100px;
}

改变box4 定位为absolute , top 10px, left 10px. 他会根据box3的定位而改变位置.

body {
  background-color: rgb(87, 124, 124);
}
.box-1 {
    margin: 0 auto;
    background-color: aquamarine;
    width: 400px;
    height: 400px; 
    text-align: left;
}
.box-2 {
    background-color: #ffff00;
    width: 300px;
    height: 300px; 
}
.box-3 {
    background-color: palevioletred;
    width: 200px;
    height: 200px; 
    position: absolute;
}
.box-1, .box-2, .box-3, .box-4{
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-4 {
    background-color: purple;
    width: 100px;
    height: 100px;
    top: 10px;
    left: 10px;
    position: absolute;
}

请添加图片描述

3. Relative positioning(相对定位)

relative相对定位，根据自己原来正常的文件流的位置来定位移动.
原来的元素占有空间不会消失，所以它不会改变页面的布局.

1）示例，四个同级元素的relative定位

在示例中有四个同等大小的元素默认static排列在一个页面。

<div class=”parent”>
 <div class=”box” id=”one”>One</div>
 <div class=”box” id=”two”>Two</div>
 <div class=”box” id=”three”>Three</div>
 <div class=”box” id=”four”>Four</div>
</div>

改变two的位置为relative，此时以定位的body元素移动top 20, left 20。

#two {
  top: 20px;
  left: 20px;
  background: green;
  position: relative;
}

在这里插入图片描述
two元素原来的空间没有消失，two相对自己原来的定位移动 top 20px, left 20px.

总结

1.每个元素都有自己的空间,位置，顺序，以及其他属性，在每一个文件流中/页面中.
2.absolute根据最近父亲元素的定位而定位移动，原来的占有空间消失，页面改变.注意：如果不定义top,left, right,bottom, 位置默认为0. 父亲元素是以定位的元素，没有absolute,relative属性的元素为position: unset. 所以这些元素不是合格的父元素. 则会找body作为父元素进行定位.
3.relative根据原来自己的定位而定位移动，原来占有的空间不会消失，页面布局不会改变。