项目中z-index规划设计

项目中z-index的规划设计

技术规范：夹层模型

整个结构分为APP层和页面组件层。APP只有一个，但页面有很多。

1~999：都是页面内比较正常的元素

1000~1999：弹窗的灰色遮罩背景之类的组件，或者是能够遮住全屏的加载动画

2000~2999：弹窗面板，比如突然弹出来一个界面提示框，登录框、警告框之类的

3000~3999：页面鼠标交互层：比如在这个界面，会有一个鼠标点击一下就能让屏幕上多出来一个小桃心的上浮动画，这个小桃心就可以用绝对定位一个div来实现。但他的z-index必须很高，比弹窗组件还要高。

有了界面层，其实还应该有个全局的APP层，APP层是完全高于界面层的一种层。和界面一样，也有遮罩层、弹窗面板层和鼠标交互层。为了方便记忆，直接设定APP层为四位数上万。

也就是10000~~19999,20000~~29999,30000~39999。

值得注意的是，该模型中不仅有向上的考虑，还有0以下的考虑

可以设定一个页面背景层，让z-index：-1

然后再设计一个APP通用背景层，z-index：-2。

总结

1000以内都是正常页面，上千级别是页面级别的东西，上万级别是APP级别的东西。

1xxx+是弹窗背景，2xxx+是弹窗，3xxx+是鼠标交互层。