css之z-index

## z-index ##

- 此属性要与定位属性一起使用才可以生效。

### 遵循三个原则 ###
1. 祖先优先原则：祖先与子元素同时设定了z-index采取以祖先的z-index数值为标准。
2. 后来居上原则：两个同级的元素，谁在后面谁优先。原因是因为dom树从前向后创建。
3. 数值大的在上面：数值大的出现在上面。
### 层叠上下文 ###
1. 层叠上下文相当于当官，是官员与皇帝（即页面的观察者）更近了。
2. 页面根元素自动有层叠上下文
3. z-index有数值的定位元素也有层叠上下文。
4. 层叠上下文可以嵌套
5. 平级层叠上下文互不影响
### 层叠水平###
1. 层叠水平定义了一个层叠上下文中的元素在z轴上的显示位置。
### 层叠顺序###
1. 在层叠上下文中的background和border：只有层叠上下文中才有。
2. 负z-index
3. block元素
4. float元素
5. inline/inline-block元素
6. z-index：auto（auto相当于0，但是z-index auto不会创建层叠上下文，而z-index：0，并加上定位元素是创建了层叠上下文的）
7. 正z-index

---为什么会有这样的顺序？

：因为1，2是用来装饰的；3，4用来布局；5，6用来显示内容，因此内容是主要的，所以内容要最优显示出来

## 相关经验分享 ##
1. 不犯“二”原则

---即为了避免混乱，z-index属性值不要超过2。

2. 利用z-index等于负值+position定位来对一些元素进行隐藏。