SCSS 管理 z-index

概述

业务需要编写一个公共组件，这个组件需要 position: fixed;，那么这个组件的 z-index 应该是多少呢？是否会被引用者页面的其他组件覆盖呢？基于此我们需要在项目中进行 z-index 的管理，如何在一个复杂的布局中管理每一个组件的层级呢？

问题

每一个 z-index 实例都会引发许多问题

• 这个元素为什么会有这个 z-index 值？在所有的其他元素的上下文中这意味着什么？
• 它的 z-index 是多少能够符合其他 z-index 值的顺序和上下文？如果增加了它的 z-index 值，其他元素哪些会受影响？
• 如果在堆叠顺序中增加了一个元素，哪些 z-index 值我需要相应地增加

使用 SCSS

解决方案：在一个统一的地方保存 z-index 的值，所有使用到 z-index 值的地方都去这里取值即可。

1. 统一的地方

// _zIndex.scss 全局文件

$elements: negative, background-color, border, auto, element, float, positive, modals;

2. 如何取值

// _function.scss 全局文件

@function get-z-index($list, $element) {
  $z-index: index($list, $element);
  @if $z-index {
    @return $z-index;
  }
  @warn 'There is no item "#{$element}" in this list; choose one of: #{$list}';
  @return null;
}

3. 使用

// page.scss

.float {
  ...
  z-index: get-z-index($element, float); // z-index: 6;
}

.modal {
  ...
  z-index: get-z-index($element, modals); // z-index: 8;
}

4. 进阶
   如果布局更复杂，有多个层叠的上下文和层叠顺序，在这种情况下，一个列表可能不够，我们需要创建多个列表，每个列表会被认为是一个上下文

// _zIndex.scss
$elements: negative, background-color, border, auto, element, float, positive,
  modals;
$modal-elements: fields, form-controls, errors, autocomplete-dropdown;

// page.scss
.modal {
  z-index: get-z-index($element, modals); // z-index: 8;

  .field {
    z-index: get-z-index($modal-elements, field); // z-index: 1;
  }

  .form-controls {
    z-index: get-z-index($modal-elements, form-controls); // z-index: 2;
  }
}

5. 扩展使用
   有些时候我们想在 element 和 float 中间插入一个 z-index，这个时候可以使用 SCSS 的列表函数进行操作

// page.scss
$elements: insert-nth($element, xxx, 5);

.xxx {
  z-index: get-z-index($element, xxx); // z-index: 6;
}

总结

• 这个元素为什么会有这个 z-index 值？在所有的其他元素的上下文中这意味着什么？
  答：根据元素在堆叠上下文中的顺序，获得 z-index 值。意味着该元素在堆叠上下文中的顺序。

• 它的 z-index 是多少能够符合其他 z-index 值的顺序和上下文？如果增加了它的 z-index 值，其他元素哪些会受影响？
  答：根据统一的堆叠上下文从而获得每个元素的 z-index。增加时意味着该元素在堆叠上下文中的顺序改变，那么其他元素在堆叠上下文中的顺序是统一的，所以该元素增加时其他元素不受影响

• 如果在堆叠顺序中增加了一个元素，哪些 z-index 值我需要相应地增加
  答：若增加一个元素，也是在 _zIndex.scss 更改 list，那么其他相关的也会自动相应的增加，无需做任何事情。