目录
1.定位
2.层叠
3.垂直居中
static：无特殊定位，对象遵循正常文档流。top，right，bottom，left等属性不会被应用。
relative：对象遵循正常文档流，但将依据top，right，bottom，left等属性在正常文档流中偏移位置。而其层叠通过z-index属性定义。
absolute：对象脱离正常文档流，使用top，right，bottom，left等属性进行绝对定位。而其层叠通过z-index属性定义。
fixed：对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。而其层叠通过z-index属性定义。
三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。
静态定位(static) ：
static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象。
相对定位(relative) ：
relative定位，又称为相对定位，从字面上来解析，我们就可以看出该属性的主要特性：相对。但是它相对的又是相对于什么地方而言的呢？这个是个重点
相对定位相对的是它原本在文档流中的位置而进行的偏移，而我们也知道relative定位也是遵循正常的文档流，它没有脱离文档流，但是它的top/left/right/bottom属性是生效的，可以说它是static到absoult的一个中间过渡属性，最重要的是它还占有文档空间，而且占据的文档空间不会随 top / right / left / bottom 等属性的偏移而发生变动，也就是说它后面的元素是依据虚线位置( top / left / right / bottom 等属性生效之前)进行的定位，这点一定要理解。
绝对定位(absoulte) ：
absoulte定位，也称为绝对定位，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的，它会从父类开始找起，直到html标签为止.
z-index属性指定了元素及其子元素的z顺序，而z顺序可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。
z-index的属性值
z-index:auto; 默认值
z-index:integer;整数值
z-index:inherit; 继承
它的特性 支持负值； 支持CSS3 animation动画；（并没什么实用应用场景） 在CSS2.1时代，需要和定位元素配合使用 如果不考虑CSS3，只有定位元素（position:relative/absolute/fixed/sticky）的z-index才有作用 z-index只对定位元素有作用。要设置非static的定位属性，z-index才会生效。
如果定位元素z-index没有发生嵌套(并列的)：
1.后来者居上的准则
2.哪个大哪个上
如果定位元素z-index发生嵌套：
z-index是数值最大的在最上层
1.背景和边框 —— 形成层叠上下文的元素的背景和边框。 层叠上下文中的最低等级。
2.负z-index值 —— 层叠上下文内有着负z-index值的子元素。
3.块级盒 —— 文档流中非行内非定位子元素。
4.浮动盒 —— 非定位浮动元素。
5.行内盒 —— 文档流中行内级别非定位子元素。
6.z-index: 0 —— 定位元素。 这些元素形成了新的层叠上下文。
7.正z-index值 —— 定位元素。 层叠上下文中的最高等级。
网页布局，特别是手机等web端网页经常是不固定高宽的div，那么这些div如何垂直居中
固定高宽div垂直居中
代码如下
position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;
不固定高宽div垂直居中的方法 方法一： 用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block，不是一个真正通用的方案。 代码如下
haorooms案例题目
haorooms案例内容，haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容haorooms案例内容
/* This parent can be any width and height */
.block {
text-align: center;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 50%;
}
方法三，终极解决方法：
以上2中方法可能都有其局限性，我介绍的第三中方法是比较成熟的不是固定高宽div的垂直居中的方法！但是方法是css3的写法，想兼容IE8的童鞋们，建议用上面的方法！
方法和我们固定高宽的差不多，但是不用margin我们用的是 translate()
demo如下：
haorooms不固定高度div写法
感谢大家观看
BY : 万登胜