定位
定位方向：top left right bottom就这四个位置
一、静态定位
position：static;静态定位就是文档流，没有别的意思，不需要写
二、绝对定位 （脱标）
position：absolute;（注意）参考点问题：
1）如果用top描述，定位的参考点是整个页面的最左上角，而不是浏览器的左上角
2） 如果用bottom描述，参考点是“ 浏览器首屏窗口尺寸 ”，注意：是首屏， 对应当前页面的左下角（不滚动到下面去）
- 若无相对定位作参考，则以浏览器页面为参考
- 当盒子发生嵌套关系时，如果父集元素没有设置定位，子盒子设置了绝对定位并赋值，子盒子的位置从浏览器左上角出发。
- （子绝父绝）当盒子发生嵌套关系时，如果父集元素设置了绝对定位，子盒子设置了绝对定位并赋值，子盒子的位置从父集元素左上角出发。
三、相对定位
position：relative;就是微调元素的位置，让元素想对自己原来的位置，进行位置调整
1.不脱标，老家留坑，形影分离
本质上元素位置还在原来的地方，只不过飘到别的地方去了（相当于影子）
2.使用相对定位，位置从自身出发
3.还占据原来的位置。没有脱标，可用于做微调
四、固定定位
position: fixed;是相对于浏览器窗口定位。页面如何滚动，这个盒子显示的位置保持不变。（IE6不兼容）
1.脱标
2.固定定位后，以浏览器为参考点
层叠性：z-index属性
（number类型）正整数，默认的z-index值是0
取值范围如下：
1）从夫现象
父节点的z-index属性值，将会直接影响子节点的层叠性
即： 父节点的z-index值很小，无论子节点的z-index值多大，其层级仍然小。
- 例如：
A,B节点都设置position为relative，且A的z-index为1，B的z-index为0，A的层级比B大
因此：A的子节点必定会覆盖在B的子节点上，无论B的子节点的z-index值多大。
<div id="A" style="position:relative;z-index:1;">
<div id="a-1" >A-1</div>
</div>
<div id="B" style="position:relative;z-index:0;">
<div id="b-1">B-1</div>
</div>2） z-index值表示谁压着谁。数值大的压盖住数值小的
3）只有定位了的元素，才能有z-index值（相对定位，绝对定位，固定定位）浮动的盒子不能用。
4）如果都没有z-index值，或值都相同，那么谁在HTML后面，谁就在上面，压住别人。
<div id="a">A</div>
<div id="b">B</div>
<!--A，B节点都设置了定位，且没有设置z-index值，那么B节点会将A节点遮住-->注意：
定位了的元素，永远能够压住没有定位的元素
层叠顺序
层级由低到高：
1.标准流盒子 < 浮动盒子 < 定位盒子
2.background/border < 负z-index < block块状水平盒子 < float浮动盒子 < inline/inline-block水平盒子 < z-index：0 < 正index
