关于absolute和relative 的一些简介

absolute

简介

	**position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。**
	**如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。**
	对象脱离常规流，此时偏移属性参照的是离自身最近的定位祖先元素，如果没有定位的祖先元素，则一直回溯到body元素。盒子的偏移位置不影响常规流中的任何元素，其margin不与其他任何margin折叠，而且，绝对定位层的margin:auto``会失效。

特点

1. 包裹性
2. 破坏性
3. 代码演示
   // 破坏性
   `

<script type="text/javascript">
var Img = document.getElementById('image')
var btn = document.getElementById('button')
if(Img !== null && btn !== null){
	btn.onclick = function(){
		if(this.absolute){
			Img.style.position = ''
			this.value = '图片absolute化'
			this.absolute = false
		}else{
			Img.style.position = 'absolute'
			this.value = '图片去absolute化'
			this.absolute = true;
		}
	}
}

</script>

//包裹性 `

relative

简介

**如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。**