下面就说说使用z-index需要注意的地方：
一、使用z-index时，必须同时使用position属性，而且属性值必须是relative、absolute、fixed。
二、z-index是根据父元素的z-index值决定的。
说的有点简单，比较详细的看这位css z-index详解。
层叠上下文——通俗的讲就是在浏览器上我们看到的 哪个元素在上面，哪个在下面。
层叠上下文规则：
1、同级元素中，谁的层叠等级大，谁在上。
2、不同等级的元素，先看父元素的层叠等级，再看子元素的层叠等级
3、同级元素等跌等级相同，根据dom结构上下排序
在不考虑CSS3的情况下，当元素发生层叠时，层叠顺讯遵循上面途中的规则。 这里值得注意的是：
- 左上角"层叠上下文
background/border"指的是层叠上下文元素的背景和边框。 inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。- 单纯考虑层叠顺序，
z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的
CSS3中出现了很多新属性，其中一些属性对层叠上下文也产生了很大的影响。如下：
- 父元素的display属性值为
flex|inline-flex，子元素z-index属性值不为auto的时候，子元素为层叠上下文元素； - 元素的
opacity属性值不是1； - 元素的
transform属性值不是none； - 元素
mix-blend-mode属性值不是normal`； - 元素的
filter属性值不是none； - 元素的
isolation属性值是isolate； will-change指定的属性值为上面任意一个；- 元素的
-webkit-overflow-scrolling属性值设置为touch。