#书摘 #css #前端
《CSS 世界》z-index“不犯二”准则
此准则内容如下：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2。由于z-index不能超过2，因此，我称其为“不犯二”准则。 这是一条经验准则，可以有效降低日后遇到z-index样式问题的风险。 先讲一下为什么需要这个准则。
（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。
（2）避免 z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协作以及后期维护的时候。例如，A小图标定位，习惯性写了个z-index:9；B一看，自己原来的实现被覆盖了，立马写了个z-index:99；结果比弹框组件层级还高，那还得了，立马弹框组件来一个z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的 z-index层级管理就是一团糟。
对于 JavaScript 驱动的浮层组件，我会借助“层级计数器”来管理，原因如下：
（1）总会遇到意想不到的高层级元素；
（2）组件的覆盖规则具有动态性。所谓“层级计数器”，实际上就是一段 JavaScript 脚本，会遍历所有
《CSS 世界》z-index“不犯二”准则
此准则内容如下：对于非浮层元素，避免设置z-index值，z-index值没有任何道理需要超过2。由于z-index不能超过2，因此，我称其为“不犯二”准则。 这是一条经验准则，可以有效降低日后遇到z-index样式问题的风险。 先讲一下为什么需要这个准则。
（1）定位元素一旦设置了 z-index 值，就从普通定位元素变成了层叠上下文元素，相互间的层叠顺序就发生了根本的变化，很容易出现设置了巨大的 z-index 值也无法覆盖其他元素的问题。
（2）避免 z-index“一山比一山高”的样式混乱问题。此问题多发生在多人协作以及后期维护的时候。例如，A小图标定位，习惯性写了个z-index:9；B一看，自己原来的实现被覆盖了，立马写了个z-index:99；结果比弹框组件层级还高，那还得了，立马弹框组件来一个z-index:999999；谁知后来，弹框中又要有出错提示效果……显然，最后项目的 z-index层级管理就是一团糟。
对于 JavaScript 驱动的浮层组件，我会借助“层级计数器”来管理，原因如下：
（1）总会遇到意想不到的高层级元素；
（2）组件的覆盖规则具有动态性。所谓“层级计数器”，实际上就是一段 JavaScript 脚本，会遍历所有
<body> 处于显示状态的子元素，并得到最大z-index值，和默认的z-index做比较。如果超出，则显示的组件的z-index自动加1，这样就不会出现有组件被其他组件覆盖的问题；如果不超出，就使用默认的z-index值，我习惯设成9，因为遵循“不犯二”准则的情况下，9已经是个足够安全的值了，浮层组件根本无须担心会被页面上某个元素层级覆盖