z-index如何设置

前言：预设一套z-index规则

如果仅仅根据业务来定义z-index，很容易出现z-index越写越大的情况，所以需要先预设一套z-index规则，限制某类元素最大z-index。那么依据什么来制定这套规则呢？

我查阅了一些资料，了解了一些组件库的z-index管理方法，其中ElementUI的方法是统一入口注册组件，在内部管理层级；IVIew的方法是全局维护一个transferIndex值，每个组件只要使用了一次transferIndex，就主动调用方法transferIncrease使得transferIndex的值+1。但是这两种方法改造工程量挺大的。还有我们常用的ant-design组件库是根据类型划分基准层级，组件内部维护层级关系。

 // ant-design/components/style/themes/default.less
/* z-index列表, 按值从小到大排列 */
@zindex-badge: auto;
@zindex-table-fixed: 2;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-popoconfirm: 1060;
@zindex-tooltip: 1070;
@zindex-image: 1080;

以Table组件为例：
// ant-design/components/table/style/index.less
@import '../../style/themes/index';
 
@table-sticky-zindex: (@zindex-table-fixed + 1);
 
&-summary {
    position: relative;
    z-index: @zindex-table-fixed;
    background: @table-bg;
}

大致可以规划为以下区间：

  伪类元素：1
  affix组件（吸顶）：10
  drawer、modal: 1000
  message、notification: 1010
  popover：1030
  dropdown 、cascader、autoComplete、DatePicker、select、TimePicker、treeSelect： 1050
  Popconfirm：1060
  tooltip: 1070
  其他： < 5

 

还有一些较小的组件库，例如DevUI，采用的也是分层级管理。

并且，还参考了该篇文章，web三层设计结构

所以，我们是不是也可以依据web的三层结构来制定一套z-index规则呢？

①是视觉层，用于放主体内容，是最中间的层

②是背景层，用于放主体内容背后的内容（如皮肤），是最后面的层

③是前置层，用于放主体内容上方漂浮的内容（如气泡，提示灯），是视觉上最上面的层，同时也保证了这层中的内容永远在其它层的上面

同层的多个元素，如多个由用户输入触发的 Dialog，在该层级内使用相同的 z-index 或递增 z-index。建议每层包含100个 z-index 来容纳足够的元素，如果每层元素较多，可以调整这个数值，但是要限制某类元素最大z-index。

 

还可以使用变量的形式来管理z-index。

一、使用Sass的列表和函数（不推荐）

定义一个scss数组，数组的值是对应层级的命名：

$elements: header, footer, dialog;

设置z-index时，我们通过scss函数 index 获取数组下标。

.dialog { z-index: index($elements, dialog); // 3 }

规定书写样式时，统一用 elements，后续维护 elements 即可，但是需要注意组件名的摆放顺序，z-index越大的需要放到后面，当有其他z-index需要插入到前面时，编译时会将所有引用在$elements 的index 都更新。

兜底：当引用了一个不存在的z-index命名时，输出警告。

@function z($list, $element) {
    $z-index: index($list, $element);

    @if $z-index {
        @return $z-index;
    }
    
    @warn '#{$list} 中存在#{$element}层级';
    
    @return null;
}

缺陷： 层级定义不灵活，根据数组的index来确定z-index，当你想定义比较大的层级时（如99），几乎是不可能的了，所以这个方案几乎不能派上实际用途，一般ui组件库的z-index都难以覆盖。

二、使用Sass的map取键值（推荐）

创建一个可以带有关键词的函数，而且这个关键词可以通过Sass的map映射得到值，使用时会在map上寻找给定的参数，这个映射出来的值就是z-index需要输出的值，如果map上没有找到，则返回一个错误信息。

举个小case，定义一个scss的map变量：

$z-layer: (
  "header": 9,
  "footer": 9,
  "dialog": 99,
);

另外，可以封装一个如下的函数，使用@warn指令发出警告信息，让开发者知道关键值不在map中

@function z($layer) {
  @if not map-has-key($z-layers, $layer) {
    @warn "No layer found for `#{$layer}` in $z-layers map. Property omitted.";
  }

  @return map-get($z-layers, $layer);
}

使用z-index时，使用scss中的map-get方法来获取值：

.diglog {
    z-index: map.get($z-layer, "dialog"); // 99
}