在使用前端进行网页开发的时候都必须使用到css来处理标签当中的样式。作为一个初学者有些属性确实理解起来比较困难，下面我们先来理解下css样式当中position中的三种定位之一的相对定位relative。
相对布局，顾名思义就是相对于某个布局的位置来进行确定位置。那么是相对于哪个来进行位置的确定呢？答案是相对于自己最初应该出现的位置来进行确定。我们来看下面这段代码：
<body>
<div class="father" style="width: 300px;height: 300px;background-color: yellow;">
<div class="son" style="width: 200px;height: 200px;background: blue;"></div>
</div>
</body>
这段代码当中，我们定义了两个div，一个作为父类的div包裹了一个子类的div，并且定义了颜色。如下图所示：
Paste_Image.png
我们可以看到蓝色块如果不指定他的位置，他就是默认出现在浏览器左上角的位置上。那么如果此时我们将蓝色块的position设置成为relative并且给他指定了top、left那么他的位置就会相对于他没有设置位置最初出现的相对位置来处理。请看下面代码：
.son{
position: relative;
top: 50px;
left: 60px;
}
Paste_Image.png
我们看到当我们蓝色块设置了top=50px和left=60px的时候他的上面和左边都相对于最初他出现的位置发生了相对应的偏移。这就是relative的概念。
但是这里可能会有人误以为这里的相对位置是相对于浏览器的左上角来进行移动，其实不然。我们再看一个例子：
.father{
margin-left: 20px;
margin-top: 20px;
}
.son{
}
我们不设置子类的位置，而是改设置包裹子类的父类的位置，此时布局发生了变化，如图所示：
Paste_Image.png
可以看到父类由于包裹了子类设置了位置从而带动了子类的初始位置发生了相应的变化，那么这个时候我们再来设置子类的相对位置和之前一样来看看会有什么不用的地方
.father{
margin-left: 20px;
margin-top: 20px;
}
.son{
position: relative;
top: 50px;
left: 20px;
}
Paste_Image.png
从图中我们可以看到，由于父类发生了改变，从而使得蓝色块初始位置由浏览器的左上角变成了出现在黄色父类块的左上角位置，从而导致我们在设置position为相对布局的时候，他的top和left虽然和之前一样，但是位置却发生了和前面不一样的改变。这就是相对布局的效应。
一言以蔽之，相对布局，即为相对于自身最初应该出现的位置作为参考系来移动的位置。最初出现的位置会受到各种父类或者其他因素的影响，所以我们在使用相对位置的时候，首先应该找准自身本身应该出现的位置，再来根据最初出现位置来设置坐标的偏移。
网友评论