z-index层叠规则引发的小问题
2018-07-14 本文已影响17人
BubbleM
问题描述：
有两个组件,分别是Picker时间选择器组件和页面底部导航组件，都需要固定显示在页面最下方。
问题场景.png
- 由于页面过长，组件固定下方都选择使用
display: flex布局。 - 设置Picker选择器
z-index: 9999层级最高，但是没有解决问题。
分析问题后发现页面布局如下图所示：
页面布局.png
由于Picker的外层元素设置了低于底部导航的层级，所以导致“层叠显示冲突”问题。必须将contain和.inputItemWrap的z-index同时取消才能解决问题。（解决原因可参考扩充内容的5和6）
扩充
-
z-index属性只有和定位元素(position不为static的元素)在一起的时候才起作用，可以是正数或负数。数值越大层级越高。 - flex盒子的子元素也可以设置z-index属性。
- 内联元素的层叠顺序要比浮动元素和块状元素高。
层叠顺序规则.png
浮动和块状元素一般用作布局，而内联元素都是内容。CSS是为图文展示而设计的，一定要让内容的层叠样式相当高，发生层叠时，内容可以优先显示。
- 层叠准则
- 谁大谁上：在同一层叠上下文领域，层叠水平值(z-index值)大的在上面。
- 后来居上：当元素的层叠水平一致、层叠顺序相同时，在DOM流中处于后面的元素会覆盖前面的元素。
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
- 每个层叠上下文和兄弟元素独立，当进行层叠变化或渲染时，只需要考虑后代元素。
- 对于
position: relative / absolute以及Firefox/IE下含有position:fixed声明的定位元素，当其z-index值不为auto的时候，会创建层叠上下文。（具体实例参考下方链接2） -
z-index负值的作用：
- 可访问性隐藏，只需在层叠上下文内的某一个父元素加个背景色即可。
- 多背景模拟。
- 定位在元素的后面。
优化
在多人协作开发及后期维护时候，为避免z-index“一山更比一山高”的样式混乱，建议z-index不超过2，可应用“relative的最小化原则”来实现，利用元素原生的层叠顺序进行层级控制。
这里将picker的层叠降低为4
