css层叠上下文，以及z-index不生效(问题)

1. 层叠上下文

1. 创建层叠上下文的元素的背景和边框
2. 层叠级别 z-index 为负值的层叠上下文
3. 常规流非定位的块盒
4. 非定位的浮动盒子
5. 常规流非定位行盒
6. 任何 z-index 是 auto 的定位子元素，以及 z-index 是 0 的层叠上下文
7. 层叠级别 z-index 为正值的层叠上下文

2. 层叠上下文与z-index的解释

• 在层叠上下文规则中，1-5条还是很好理解的，第6条的意思是定位元素层级是大于前面五条的，且与z-index为0同级
• 而z-index有一个特点，只有在定位元素上面有效果，常规流的盒子使用transform: translate()(不包括z);时在使用z-index也没有效果
• 在同一个父元素的兄弟元素之间，两个兄弟元素之间使用了定位，后面的元素必定会盖住前一个兄弟元素，这样就可以使用z-index改变层级，值越大越上层
• z-index的应用场景就是同一个父元素，的多个定位的兄弟元素之间使用的
• 强调一点，子元素是一定在父元素层级之上，同一层级等级的情况下，后一个兄弟元素也一定是在前一个兄弟元素之上

3. z-index不生效

z-index 是服务于定位或者 flex 布局的，只有设置了定位或 flex 的元素才会生效，并且为同一个父级才会改变两个元素之间层叠关系