z-index理解

html中页面元素可以并列，也可以层叠。z-index是用来控制元素重叠时堆叠顺序的属性。z-index属性适用于已经定位的元素（即position不为static的元素）

1. 堆叠上下文

即stacking content，在一个页面中可能有多个堆叠上下文，每个页面上的元素都只属于一个堆叠上下文，元素的z-index属性也只描述同一个堆叠上下文中"z轴"的层级表示，不同堆叠上下文的元素无法通过z-index来控制元素的层叠

2. z-index的取值

• z-index的默认值是auto，当页面生成一个新的元素时，如果不显式地设置它的z-index值，它就不会自己产生一个新的stacking content，而是处于和父元素相同的stacking content中。
• z-index的值可以为inherit，表示继承父级的属性。
• z-index的值也可以设置为整数值，甚至可以设置为负值，当元素的z-index值设置为整数时（包括0），它就会产生一个自己的stacking content，它的父元素的z-index值就不会和它的z-index值做比较。

3. 不使用z-index的情况

页面元素在页面中的布局是流式的，即从上到下，从左到右排布，而堆叠顺序是从下到上的，也就是说一个元素A先于另一个元素B出现，那么A就是处于B之下的（如果两者有重叠的部分，A就会被B覆盖）。

另一个关注点是非定位元素（即不显式地设置position的元素）总是先于定位元素（显式地设置position的元素）渲染的，所以它始终是在定位元素之下的，与在HTML中出现的顺序无关。

比如最后一个normal元素出现在position为absolute和relative的后面，却被它们遮盖。

4. 浮动堆叠顺序 浮动元素的层叠位置介于非定位元素与定位元素之间

5. z-index的堆叠 如果一个元素未设置position，那么即使设置了z-index的值，也无法提高它的层级。

6. 子元素的z-index值只在父元素范围内有效。子堆叠上下文被看做是父堆叠上下文中一个独立的模块，相邻的堆叠上下文完全没关系。

总结：

1. z-index的默认值是auto，表示和父元素在相同等堆叠上下文中。
2. 只有设置了position为absolute或者relative，才可以通过z-index提高层级。
3. 非定位元素（即不显式地设置position的元素）总是在定位元素（显式地设置position的元素）之下。
4. 浮动元素的层叠位置介于非定位元素与定位元素之间