css-position的理解

 即使没有css，html元素也有一套定义它们显示方式的预定义规则，如下3条

1、内容决定一切

在inline元素中，元素只占用与内容一样多的高度和宽度，即使是block元素，宽度占页面的100%，但高度仍由内容决定。

2、屏幕上显示的元素顺序决定于HTML代码

3、子元素在父元素之上（覆盖父元素）

 但是可以通过修改position属性和坐标属性值（top，bottom，left，right）来修改默认的显示方式，如下介绍。

static ： 写好html，不进行任何的css修饰，只遵从浏览器基本的定位规则 ，就如上面介绍的3条规则。

relative：相对原本的static位置的定位（下图1），移动它不会影响其他布局（原来的坑还在）（下图2）。用box模型中的margin值来思考。

absolute：相对其最近的父元素的定位，移动它会使原来的位置空出，其他元素会按照static规则摆放过来，如果想破坏原有html元素的摆放顺序，则修改position为absolute。

 定义三个div，这里的绝对定位就是相对于父元素的相对定位，只不过这里三个div元素的父元素都是body

body{
	margin: 0;
}
.red{
	width: 100px;
	height: 100px;
	background-color: red;
	position: absolute;
	top: 200px;
	left:200px;
}


.blue{
	width: 100px;
	height: 100px;
	background-color: blue;
	position: absolute;
	top: 100px;
	left: 100px;
}


.yellow{
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: absolute;
}

效果： 

html默认body由一定量的margin，如果想让元素显示到页面边缘，要把body的margin设置为0

fixed：即使页面发生滚动，元素依然会在屏幕上的那个确定位置上，类似于excel的冻结首行，无论如何上下滚动，第一行永远显示在那个位置。

使用relative 和 absolute 的组合来微调元素位置