CSS：定位分析

position：absolute（绝对定位）\relative(相对定位)\fixed（固定定位）\none;

相对定位(position:relative;)
1.不影响元素自己的特性；
2.不会让元素脱离标准文档流；
3.若是不设置偏移量，对元素没有任何影响；
4.定位元素方向控制：top/bottom/left/right;
5.相对定位是相对于本身最开始的位置（相对于本身）进行了偏移；
6.偏移量可正可负；
eg:

<div class="box">box</div>


.box{
	border: 4px solid red;
	width: 200px;
	height:200px;
	position: relative ;
	bottom:50px;/*距原来的底部位置50px,即向上50px*/
	right:50px;	/*距原来的右边位置50px,即向左50px*/
}

绝对定位（position:absolute;）
1.使元素脱离文档流；
2.若是用在内嵌元素上，会使元素支持宽和高；
3.块属性标签内容撑开宽度；
4当多个元素定位，默认后面的元素层级高于前面的元素（覆盖）；
5.能够用z-index属性定义层级，层级大的覆盖层级小的；
6.若是没有父子盒子，绝对定位是相对于页面窗体大小来发生偏移的；
7.若是是父子盒子，当前元素是绝对定位，有父级元素定位(不管是相对定位仍是绝对定位)
发生偏移，则当前元素就相对于最近的父级（以及父级以上的父级）元素发生偏移，

在父子盒子中，若是在子盒子添加绝对定位（position:absolute;）则子盒子会脱离标准流，

原来父盒子的元素不必定会覆盖，若是原来的元素在盒子前面则不会覆盖，在只有在后面的元素会覆盖掉
没有则相对于整个窗体发生偏移；若是有前面和后面的元素，则前面的元素和后面的元素会先显示
8.相对定位通常配合绝对定位使用；

eg:

<div class="box2">
	A
	<div class="box1">box222</div>
	B
</div>


.box{
	border: 14px solid gray;
	width: 600px;
	height:600px;
	postion：relative；
}
.box1{
	border: 4px solid blue;
	width: 300px;
	height:300px;
	position: absolute;
	background-color: red;
	
}

 

 

固定定位（position：fixed;IE6如下不支持）
1.使元素脱离文档流；
2.若是用在内嵌元素上，会使元素支持宽和高；
3.块属性标签内容撑开宽度；
4.固定定位不会随着滚动条滚动；
5.固定定位不受自身父级的影响，
自会固定在当前窗体的某一个位置；

<div class="box">
		<div class="box1">box222</div>
</div>




.box{
	border: 14px solid gray;
	width: 600px;
	height:900px;
	
}
.box1{
	border: 4px solid blue;
	width: 300px;
	height:300px;
	position: fixed;
	background-color: red;
	bottom:0px;
	right: 0px;
	
}

 

其它定位：position:static;默认值
position:inherit;从父级继承；//通常不用
定位问题：
position：relative;(相对定位)
在IE6下父级必定包住子级，子级会把父级给撑开；
在其余浏览器下子级多余部分将溢出；在IE6下父级的
overflow是包不住子级的相对定位（relative）；
解决办法：把父级元素变为定位元素；

position:absolute;

在 IE6 下定位元素的父级宽高都为奇数那么在
IE6 下定位元素的 right 和 bottom
都有1像素的误差。

position:absolute;
绝对定位元素子级的浮动能够不用写清浮动方法；

position:fixed;
固定定位元素子级的浮动能够不用写清浮动方法；
（IE6不兼容）

若是子级有浮动，父级将包不住；