【CSS】保证弹出项在最上层

angular 组件开发中涉及到会产生弹出层的组件：dialog、alert、message、menu、popupbutton、combobox、tooltip 等。 在 html 中，控制元素的显示层级，需要设置元素（position 为 relative 、absolute、fixed）的 z-index，其值越大，越靠上。所以我们需要弹出项的 z-index 足够大。 最初为所有弹出层统一样式，设置 z-index:5000（一个较大的数字）以使其显示在其他DOM元素上，之后在写 demo 时，发现忽略了多个弹出层的情况，如：dialog 中有一个 combobox，这个 combobox 有可能被 dialog 遮挡。此时我们需要一个公用的方法来生产递增 z-index，每次弹出层时，调用此方法获取新的 z-index 并附加到弹出层的样式中，来保证最后弹出的 z-index 总是最大。
此外，z-index 并不是总体排序的。比如 A(z-index:0)，B(z-index:20)，A 中有一个 A1(z-index:200)，A1 仍然会被 B 遮挡，所以我们之后将组件中的弹出项都 append 到 body 中，使得所有弹出项都在同一个父元素 body 中。
之后测试中加入了 iframe，frame 中的弹出项会附加在该 frame 的 body 中，无法遮挡 frame 外的其他元素，最后在 append 到 body 之前，先查找到最顶层的 window 后将弹出项附加到其 body 中。