小课堂【上海】
[css]中的z-index初解和使用
分享人：郑佳威
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
1、z-index是什么？
2、z-index 是怎么工作的？
3、我们可以利用z-index实现什么功能？
4、为什么有时一个有着较大z-index值的元素却显示在只有较小z-index值的元素的后面？
5、当一个设置了z-index值的定位元素与常规文档流中的元素相互重叠的时候，谁会被置于上方？
6、当定位元素与浮动元素相互重叠的时候，谁会被置于上方？
7、当定位元素被嵌套在其他定位元素中时会发生什么？
z-index是什么？ w3school给出的定义是：z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
关键词：X/Y/Z轴
demo1
z-index的特性
z-index有三种值，分别是auto自动，整数（正整数、0、负整数），inherit（继承）；
z-index只能在定位元素上有效（如position:relative）；
2.知识剖析(z-index是怎么工作的？)
层叠次序
小结
层叠间相互的关系3.常见问题
使用z-inex需要注意的地方
1、在开发中尽量避免层叠上下文的多层嵌套，因为层叠上下文嵌套过多的话容易产生混乱，如果对层叠上下文理解不够的话是不好把控的。
2、非浮层元素（对话框等）尽量不要用z-index（通过层叠顺序或者dom顺序或者通过层叠上下文进行处理）
3、z-index设置数值时尽量用个位数
4、让absolute元素覆盖正常文档流内元素（不用设z-index，自然覆盖）
5、让后一个absolute元素覆盖前一个absolute元素（不用设z-index，只要在HTML端正确设置元素顺序即可）
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
讨论时间到，欢迎大家提问！
鸣谢
感谢大家观看
By 郑佳威