CSS中的定位属性中相对定位与绝对定位的区别

【逆战班的课程讲解】

一、什么是相对定位

	相对定位：relative。当我们给元素加上这个属性值的时候，元素本身并没有任何变化，而且我们会发现，页面的布局也没有受到任何的影响，所以，这个属性值在我们没有给他添加偏移量的时候，它是与正常的块状元素无异的。
	并且，这个属性值并不能让该元素脱离文档流，它的原有空间是会被保留下来的，所以我们在应用的同时会发现这个属性值是不会影响其他元素布局的。
	通过left，right，top，bottom，四个值来进行定位偏移，这个元素的便宜方式，是相对它本身原来所在的位置进行偏移。这四个值并不能独立存在，必须配合定位属性使用。

二、什么是绝对定位

	绝对定位：absolute。绝对定位的定位方式是默认根据浏览器的可视窗口来进行定位的，并且，在给某个元素加了绝对定位的属性之后，该元素原有的位置会被其他的元素补上，所以这个元素是完全脱离文档流的。
	对于内联元素来说，加了绝对定位之后，内联元素就会具备块元素的特性，也就是说我们可以给内联元素写宽和高了。
	对于块元素来说，添加绝对定位之后，块元素就会具备内联元素的特性，块元素的默认宽就会根据内容的多少来决定。
	我们可以通过包含块，来给绝对定位元素的父元素或者组先级的元素定义为绝对定位元素的参照物，让添加了绝对定位的元素相对于组先级的元素去进行定位。

三、绝对定位和相对定位的区别

1、参照物的区别：相对定位的参照物是他自己本身，而绝对定位的参照物默认是浏览器可视窗口，当我们给绝对定位元素添加了包含块，那么绝对定位元素的参照物就是包含块。
2、文档流的区别：相对定位并不会脱离文档流，他原有的位置会被保留，并且不会影响其他元素的页面布局。绝对定位会脱离文档流，并且它原有的位置会被其他元素补上，是会影响其他元素的布局的。

四、关于何时用绝对定位何时用相对定位的小方法

我们在拿到设计稿之后，发现了需要用得到定位的地方，当我们不确定该用什么定位时，我们可以使用以下几个小方法（暂时不包含其他定位属性值）：
1、观察设计稿中的元素是否脱离文档流：我们可以在脑海中进行一个假设，假设这个元素没有脱离文档流是什么样的布局方式，如果脱离了文档流又是什么布局方式，在确定了是否脱离文档流之后，就可以确定这个元素用的是什么定位了。
2、如果我们判断不出来是否脱离文档流，我们可以假设该元素用的是相对定位，在HTML中给该元素添加相对定位之后，我们再给他添加一个纯色的背景色，如果我们的页面布局与设计稿没有布局上的差异，就说明用相对定位是可以的，如果有差异，我们则需要改用绝对定位。（原理：仍旧是是否脱离文档流，相对定位的元素不会脱离文档流，如果设计稿的元素是用绝对定位书写，那么我们用相对定位一般情况下会在页面显示布局上产生差异。）
3、以上的方法仅限于不知道何时使用相对定位或绝对定位时使用，在用其他定位属性值时不适用。