div的position定位

CSS的块元素（div）有两种基本定位方式：位置定位（position），浮动（float）。

使用position属性来定义div的位置，如果不写默认是static

1、fixed：生成绝对定位的元素，相对于浏览器窗口(下面红框位置)进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

　　

 2、absolute

生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。（absolute是相对于他的包含块中第一个有position:absolute或者position:relative属性的父级元素，如果都没有，就是相对于浏览器窗口进行定位）

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

3、relative

生成相对定位的元素，相对于其正常位置进行定位(即不使用positon属性时的位置)。

因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

4、static

默认值。没有定位，元素出现在正常的流中（即以父类的的0,0点开始每行一个div），对top, bottom, left, right 或者 z-index 声明对他没有作用

 

备注：

fixed，absolute是在父文档区的top, bottom, left, right 处新起一个文档区（即悬浮起来），不占用父类的位置！

如果要让div的百分比起作用则需要父元素的高度不为0;body和html的高度默认是0；所以创建div时，设置height:100%时没有效果的,body和html元素的高度由他的子元素进行填充，由标准内容层的内容高度来确定！

如果父元素没有设置height属性而是由子元素去填充获得的高度，其所有子元素也不能使用百分比！

如果父元素设置了height，而子元素的高度高于父元素则父元素的高度会保持不变，可以通过设置overflow 属性来设置超出部分如何展示！