对CSS中定位属性的深度剖析

首先，让我们来分析一下普通流层，浮动流层和定位流层的区别。

普通流层

比作一个场地。人们要在场地中找寻自己的位置，不一定要对号入座，但必须按照椅子的摆放方式入座（比如椅子是围成圆形的或是正方形的），总不能全部的人坐在一个位置上，人摞人呀！这样必定会发生混乱。

浮动流层

你可以理解为在纸上放的一些东西，比如橡皮、铅笔、尺子等，你可以把他们放在纸上的任意位置，而且可以覆盖纸上的其他东西。但是当你把橡皮移开后，你可以发现纸上原本的东西是不会变动的。

定位流层

更高的流层，可以理解为网页的最高层，起到定位的作用。

介绍完不同的流层，接下来我来重点说一下定位属性。它是用来控制元素的位置，包括相对定位、绝对定位和固定定位三种方式。（当然，排除了默认定位，position：static）
原始代码及效果：

<style>
	#parent{
		background-color: gray;
		width: 500px;
		height: 250px;
	}
	.son{
		float: left;
		width: 100px;
		height: 100px;
	}
	#son1{
		background-color: red;
	}
	#son2{
		background-color: green;
	}
	#son3{
		background-color: yellow;
	}
</style>
<div id="parent">
	<div class = "son"  id ="son1"></div>
	<div class = "son"  id ="son2"></div>
	<div class = "son"  id ="son3"></div>
</div>

效果如图：

1.相对定位
让元素相对于文档布局的原始位置进行偏移。
position: relative;元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
例如：
现在我们让中间的div相对于其本身进行定位,其余部分不作变化

#son2{
	position: relative;
	left: 100px;
	top: 100px;
	background-color: green;
}

效果如图：

可以看到，中间div相对于本身位置进行左、上偏移。
2.绝对定位
允许元素与原始文档布局分离且任意定位；
position: absolute;
例如： 现在我们让中间的div进行绝对定位,其余部分不作变化

#son2{
	position: absolute;
	left: 100px;
	top: 100px;
	background-color: green;
}

效果如图：
（）
3.固定定位
当页面滚动时，元素不随着滚动。
position: fixed;（这个比较简单，就不举例子了）

注意：绝对定位和相对定位都属于定位层。但是相对定位，会在其原本的位置留下痕迹。举个例子：相对定位可以理解为，你因为有事休学，但你现在所在的学校会给你保留学籍；而绝对定位就可以理解为，你转学或退学了，你的学籍已经不再本校保留，一切行为与本校无关。