关于z-index
1，所有定位了的元素在没有被定位的元素前面。（一个元素被定位的意思这里指的是它有一个position属性，但是不是static，而是relative,absolute，fixed）
2, Z-index属性只作用在被定位了的元素上。z-index会创建一个堆叠的上下文（Stacking Contexts），我们可以理解为一个层。
3,当一个元素创建一个层，那么它的所有子元素都会受到父元素的堆叠顺序影响。意味着如果一个元素位于一个最低位置的层，那你z-index设置得再大，它也不会出现在其它层元素的上面。
4, 什么情况下会产生新的层：
- 当一个元素位于HTML文档的最外层（
<html>元素） - 当一个元素被定位了并且拥有一个
z-index值（不为auto） - 当一个元素被设置了
opacity，transforms,filters,css-regions,paged media等属性。5, 同一层里面的堆叠顺序 （从后到前）：
- 层的根元素
- 被定位了得元素并且
z-index值为负，相同z-index的情况下，按照HTML元素的书写顺序排列，下面相同。 - 没有被定位的元素
- 被定位的元素，并且
z-index值为auto - 被定位了的元素并且
z-index值为正。
6,好好地理解什么是层叠上下文，
层叠上下文1 (Stacking Context 1)是由文档根元素形成的。 层叠上下文2和3 (Stacking Context 2, 3) 都是层叠上下文1 (Stacking Context 1) 上的层叠层。 他们各自也都形成了新的层叠上下文，其中包含着新的层叠层。
想象在第一张桌子上有四个小方块，他们都直接放在桌子上。 在这四个小方块之上有一片玻璃，而在玻璃片上有一盘水果。 这些方块、玻璃片、水果盘，各自都代表着层叠上下文中一个不同的层叠层，而这个层叠上下文就是桌子。
7，
