z-index层叠规则引发的小问题

问题描述：

有两个组件,分别是Picker时间选择器组件和页面底部导航组件，都需要固定显示在页面最下方。

问题场景.png

1. 由于页面过长，组件固定下方都选择使用display: flex布局。
2. 设置Picker选择器z-index: 9999层级最高，但是没有解决问题。

分析问题后发现页面布局如下图所示：

页面布局.png

由于Picker的外层元素设置了低于底部导航的层级，所以导致“层叠显示冲突”问题。必须将contain和.inputItemWrap的z-index同时取消才能解决问题。（解决原因可参考扩充内容的5和6）

扩充

1. z-index属性只有和定位元素(position不为static的元素)在一起的时候才起作用，可以是正数或负数。数值越大层级越高。
2. flex盒子的子元素也可以设置z-index属性。
3. 内联元素的层叠顺序要比浮动元素和块状元素高。

层叠顺序规则.png

浮动和块状元素一般用作布局，而内联元素都是内容。CSS是为图文展示而设计的，一定要让内容的层叠样式相当高，发生层叠时，内容可以优先显示。

4. 层叠准则

• 谁大谁上：在同一层叠上下文领域，层叠水平值(z-index值)大的在上面。
• 后来居上：当元素的层叠水平一致、层叠顺序相同时，在DOM流中处于后面的元素会覆盖前面的元素。

5. 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
6. 每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，只需要考虑后代元素。
7. 对于position: relative / absolute以及Firefox/IE下含有position:fixed声明的定位元素，当其z-index值不为auto的时候，会创建层叠上下文。（具体实例参考下方链接2）
8. z-index 负值的作用：

• 可访问性隐藏，只需在层叠上下文内的某一个父元素加个背景色即可。
• 多背景模拟。
• 定位在元素的后面。

优化

在多人协作开发及后期维护时候，为避免z-index“一山更比一山高”的样式混乱，建议z-index不超过2，可应用“relative的最小化原则”来实现，利用元素原生的层叠顺序进行层级控制。

这里将picker的层叠降低为4

参考

1. https://segmentfault.com/q/1010000009843297
2. https://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/