z-index无效

导致z-index失效的原因有很多种，在CSS3时代就变的更多，所以最近遇到这样的问题后仔细翻看了一些资料，发现其背后的逻辑就在这个 层叠上下文 上。

张大神的图

去繁就简的说，有两个原则：
1.对于 同一个层叠上下文*，依照上图进行层叠；
2.当比照上图发现处于同一层，在 DOM 流中后面的元素覆盖前面的元素；

---

*当通过以上原则比对之后还有问题的，请注意子孙元素的层级是包含在父元素形成的层叠上下文之下的。
通俗点说父元素盖不住的，子孙元素更加盖不住，解决办法可以改 Html 结构，或者提高父元素的层级。

总结

在设计Html结构时就要考虑到层级可能带来的问题，以免返工。
如果当初没有考虑好，事后补救方案可以在高层NodeTree上增加弹框元素。