css基础回顾-定位：position

w3school 对position定义和说明是：

定义和用法：
position 属性规定元素的定位类型。

说明：
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

position有以下属性值：

可能的值
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。

static    默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

inherit    规定应该从父元素继承 position 属性的值。

1、absolute具有以下特点：

1、使元素完全脱离文档流；
2、使内嵌支持宽高；
3、块属性标签将由内容撑开宽度；
4、如果有定位父级相对于定位父级发生偏移，没有定位父级相对于整个文档（document）发生偏移；
5、相对定位一般都是配合绝对定位元素使用；

具体应用如多级菜单，一级菜单的li设置相对定位，二级菜单的ul设置绝对定位。

如下：

• 一级菜单1
  • 二级菜单1-1
  • 二级菜单1-2
  • 二级菜单1-3
  • 二级菜单1-4
• 一级菜单2
  • 二级菜单2-1
  • 二级菜单2-2
  • 二级菜单2-3
  • 二级菜单2-4
• 一级菜单3
  • 二级菜单3-1
  • 二级菜单3-2
  • 二级菜单3-3
  • 二级菜单3-4

说明：一级菜单的每个li设置了相对定位，二级栏目的ul设置绝对定位，寻找最近的定位父级，为父级Li，所以相对于父级Li定位。

2、relative:具有以下特点：

1、不影响元素本身的特性；
2、不使元素脱离文档流；
3、如果没有定位偏移量，对元素本身没有任何

具体应用实例：

• 一级菜单1
• 一级菜单2
• 一级菜单3

给每个Li设置了相对定位position:relative;设置hover时top的值为-2px，可以看到hover的li像对于自身像上移动2px，而不会对页面其他内容产生影响。

3、fixed的特点于absolute基本相似，不同的是fixed是相对于整个文档定位，即定位父级是document，另外IE6不认识fixed属性值，应用可以做一个始终居于页面右下角的回到顶部按钮(但这个一般都是JS制作的)

先总结这么多吧。。。。。当自己复习用