HTML定位详解

1.固定定位

先上代码看效果

	#guDing{
		background: lightblue;
		position: fixed;
		/*固定定位*/
		left: 500px;
		top: 200px;
	}

效果如蓝色正方形

蓝色正方形在滑动之后正方形依然在相对于浏览器窗口的原位置不变。这个就是固定定位，相对于浏览器窗口定位,翻页时位置不变。

2.相对定位

上代码看效果

	#xiangDui{
		background: lightcoral;
		position: relative;
		left: 100px;
		top: 200px;
	}

效果如红色正方形

有图可得，为什么文字距离页面上方有一段空白呢？（红色画出来的地方）因为空白的位置其实已经被红色正方形占用了，所以文字会跑到下面去。相对定位是相对于原本文档流中的位置定位,仍然占据原位置

3.绝对定位

上代码看效果

	#jueDui{
		background: lightgreen;
		position: absolute;
		left: 200px;
		top: 100px;
	}

效果如绿色正方形

有图可得，绿色正方形跟文字叠在了一起，跟相对定位正好相反，绝对定位是，对于离它最近的已定位父级进行定位（一般是body）,一直至找到浏览器窗口位置，而不考虑是否会跟其他元素的位置，所以就算很多元素重叠了绝对定位也不在乎。