前言
在CSS中有三种定位方式:相对定位、绝对定位和固定定位
一、相对定位
相对定位的属性是position:relative，如过对某个元素设置了相对定位，元素就会根据自身左顶点进行位置偏移，元素还是会占用之前的位置；如图
<style>
.fa{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid red;
}
.div{
width: 100px;
height: 100px;
background-color: red;
//position: absolute;
position:relative;
top: 20px;
left: 20px;
}
.div1{
width: 100px;
height: 100px;
background-color: gold;
}
</style>
<body>
<div class="fa">
<div class="div">
</div>
<div class="div1">
</div>
</div>
</body>
二、绝对定位
绝对定位的属性是position:absolute，如果对元素设置了绝对定位，元素位置偏移就会根据body的左顶点进行偏移。
如图所示，当元素设置了绝对定位。就会脱离文档流进入浮动层，absolute的层级要比float的要高，所以float会被覆盖，而且如果给两个元素设置了absolute，前一个会被后一个覆盖
三、固定定位
固定定位的属性是position:fixed；固定定位会把元素固定在页面的某个位置，会随着滚动条的移动而移动。
四、子绝父相布局
子绝父相布局就是给子级元素设置绝对定位，给父级元素设置相对定位的布局方式，这样子级元素就会根据父级的左顶点进行位置偏移。
<style>
.fa{
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid red;
position:relative;
}
.div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 20px;
left: 20px;
}
</style>
<body>
<div class="fa">
<div class="div">
</div>
</div>
</body>
通过子绝父相布局可以解决许多麻烦的操作，一般在网页布局中是很常用的解决方式了。