CSS定位以及z-index属性（层叠性）的详解

定位

定位方向：top left right bottom就这四个位置

一、静态定位

 position：static;

静态定位就是文档流，没有别的意思，不需要写

二、绝对定位 （脱标）

position：absolute;

（注意）参考点问题：

1）如果用top描述，定位的参考点是整个页面的最左上角，而不是浏览器的左上角
2） 如果用bottom描述，参考点是“ 浏览器首屏窗口尺寸 ”，注意：是首屏， 对应当前页面的左下角（不滚动到下面去）

1. 若无相对定位作参考，则以浏览器页面为参考
2. 当盒子发生嵌套关系时，如果父集元素没有设置定位，子盒子设置了绝对定位并赋值，子盒子的位置从浏览器左上角出发。
3. （子绝父绝）当盒子发生嵌套关系时，如果父集元素设置了绝对定位，子盒子设置了绝对定位并赋值，子盒子的位置从父集元素左上角出发。

三、相对定位

position：relative;

就是微调元素的位置，让元素想对自己原来的位置，进行位置调整

1.不脱标，老家留坑，形影分离

本质上元素位置还在原来的地方，只不过飘到别的地方去了（相当于影子）

2.使用相对定位，位置从自身出发

3.还占据原来的位置。没有脱标，可用于做微调

四、固定定位

 position: fixed;

是相对于浏览器窗口定位。页面如何滚动，这个盒子显示的位置保持不变。（IE6不兼容）

1.脱标

2.固定定位后，以浏览器为参考点

层叠性：z-index属性

（number类型）正整数，默认的z-index值是0

取值范围如下：

1）从夫现象

父节点的z-index属性值，将会直接影响子节点的层叠性
即： 父节点的z-index值很小，无论子节点的z-index值多大，其层级仍然小。

1. 例如：
   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