最近在项目的过程中遇到了一个问题，menu-bar希望始终显示在最上面，而在之后的元素都显示在它之下，当时设置了 z-index 也没有效果，不知道什么原因，因此找了一下css有关层叠方面的资料，解决了这个问题，这里记录一下~
屏幕是一个二维平面，然而HTML元素却是排列在三维坐标系中，x为水平位置，y为垂直位置，z为屏幕由内向外方向的位置，我们在看屏幕的时候是沿着z轴方向从外向内的；由此，元素在用户视角就形成了层叠的关系，某个元素可能覆盖了其他元素也可能被其他元素覆盖；
那么这里有几个重要的概念：层叠上下文 (堆叠上下文, Stacking Context)、层叠等级 (层叠水平, Stacking Level)、层叠顺序 (层叠次序, 堆叠顺序, Stacking Order)、z-index
声明：
- 以下定位元素指的是
position: absolute|fixed|relative|sticky - 以下非定位元素指的是
position: initial|static - 关于层叠上下文还有一个类似的概念：块级格式化上下文(BFC, Block Formatting Context)，可以参考一下CSS 中重要的BFC，其中还介绍了一些文档流的内容；
- 本文蛮长的，但是如果你有勇气看完，那应该对层叠有关概念就基本掌握了 (～o￣▽&
