position的属性值relative/fixed/absolute的区别
一、概况： web前端开发中，样式是基础中的基础，做定位时候，常常会出现相对定位理解不透彻的问题，下面，我为大家简单又清晰的解答这三个属性值的区别。
二、简要：
| 区别 | 描述 |
|---|---|
| 相对移动 | relative是相对自己的初始位置进行left/top/right/bottom移动的；absolute是相对父元素进行移动的，父元素要有position属性；fixed是相对html文档定位的 |
| 是否占用文档流 | relative没有脱离文档流，还占用位置；absolute、fixed是脱离文档流的，也就是在页面中不占用空间 |
三、代码演示
设置border比较好演示。下面是没有position属性的样子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
html {
height: 100%;
width: 100%;
}
.box {
width: 400px;
height: 400px;
text-align: center;
border: 1px solid blue;
margin: 100px auto;
}
.fa {
width: 160px;
height: 160px;
line-height: 160px;
border: 1px solid black;
margin: 20px;
}
.son {
width: 80px;
height: 80px;
line-height: 80px;
border: 1px solid red;
margin-left: 20px;
}
.grandson {
width: 40px;
height: 40px;
line-height: 40px;
border: 1px solid #aff;
}
</style>
</head>
<body>
<div class="box">
<div class="fa">
<div class="son">
<div class="grandson">*</div>
</div>
</div>
</div>
</body>
</html>
这里我就不做具体的演示了，突然觉得这个是需要自己动手操作的，只有自己真的做了才会真的懂得其中的区别，但是我会给大家罗列出需要测试的内容
- 子元素son加positin:absolute;看效果
- 父元素fa加relative看效果
- 父元素不加，孙子元素加position:absolute;父元素不加，孙子元素加relative
- fa加absolute,son加position：relative;fa加absolute，son加position：absolute；fa加absolute，son加position:fixed;fa父元素加absolute，子元素son加position:relative;
- 父元素加postion:relative;top:10px;看是否移动，怎么移动的
- ……
大家可以根据自己的理解尝试不同的组合，来消除自己对我的简要总结的理解误区，只有自己真的尝试了，理解的才更深刻，一劳永逸才真的有可能实现。
结语：
自己动手，丰衣足食！！！