fixed 与 absolute 同时存在，如何避免 z-index 对层级的影响？

Question

协同开发的项目中，两部分的 DOM，一部分使用 fixed 布局，一部分使用 absolute 布局，由于业务需要，都使用了了 z-index，此时如何避免 z-index 的值对层叠的影响？

需求是 fixed 布局永远在最上面，但是因为 absolute 布局中 z-index 的值，比 fixed 大，导致 absolute 覆盖到了 fixed 布局中。

示例代码如下：

• DOM 结构

<div class="wrap_f_1">
  <div class="wrap_c_1">
    <span>test</span>
  </div>    
</div>
<div class="wrap_f_2">
  <div class="wrap_c_2">
    <span>test</span>
  </div>    
</div>

• CSS

.wrap_f_1{
  position: fixed;
  top:0;
  right:0;
  left:0;
  height: 50px;
  background-color:#444;
  z-index:999;
}
.wrap_f_2{
  width:100%;
  height:50px;
  position: relative;
}
.wrap_c_2{
  position: absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background-color:red;
  z-index:9999;
}

• 效果：

目前考虑的方案两种：

1. 开发约定：要求 absolute 布局的 z-index 不得大于某个值（由于多人开发，这个约定不可控，还会使用一些三方组件）
2. fixed 布局 z-index 通过 javascript 获取 body 中最大的 z-index 然后设置比最大的 +1，这个要求所有的 fixed 都要进行这样的动作，改动点比较多。

是否有其他更优方案呢？ z-index 一旦指定，在层叠样式中，优先级是否只会根据 z-index 来判断，而不会判断 fixed>absolute>relative（我印象中 fixed 是最高优，不会受 z-index 影响，惨。。。）

Answer 1

absolute 相对与最近的一个position:relavtive/fixed/absoulute的容器，fixed是基于窗口，那么你只要让absolute容器的z-index值比最小的fixed小就可以了，剩下的 absolute元素的z-index值可以随意设置

Answer 2

感觉你的第二个方法会比较合适。

只不过在前端项目打包时才做处理，获取z-index最大值，所有的fixed布局的z-index加上这个最大值。（这样做的缺点应该只是打包时间长一点而已）

当然为了在开发模式下预览同样的效果，需要做个判断，开发模式时每个页面渲染做上述相应的处理。